Sto realizzando un menu a cascata e ho questi stili per la sidebar:


#sidebar {
float: right;
width: 260px;
background: url(images/img08.jpg) repeat-y left top;
font-size: 11px;
}

#sidebar-bgtop {
background: url(images/img07.jpg) no-repeat left top;
}

#sidebar-bgbtm {
background: url(images/img09.jpg) no-repeat left bottom;
padding: 40px 40px 20px 40px;
}

#sidebar-bgbtm2 {
background: url(images/img09.jpg) no-repeat center bottom;
padding: 40px 0px 35px 0px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#sidebar li {
margin-bottom: 1px;
}

#sidebar li ul {
margin: 0px;
padding: 0px 0px 40px 0px;
}

#sidebar li li {
margin: 0;
padding: 7px 0px;
border: none;
background: url(images/img10.jpg) repeat-x left bottom;
font-family: Tahoma, Geneva, sans-serif;
}

#sidebar li li a {
background: url(images/img11.jpg) no-repeat left 3px;
padding-left: 20px;
}

#sidebar h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 180%;
font-weight: normal;
color: #454E55;
}

#sidebar h3 {
font-size: 77%;
color: #454E55;
}

#sidebar p {
margin: 0;
line-height: normal;
color: #D4C792;
}

#sidebar a {
border: none;
text-decoration: none;
color: #757E82;
}

#sidebar a:hover {
text-decoration: underline;
color: #363636;
}

L'immagine 11 è una piccola freccetta. Se volessi che il testo contenuto nel[*] relativo alla pagina in cui mi trovo avesse un colore e un'immagine di riferimento diversa, cosa dovrei fare?
se aggiungo uno stile al[*] nella pagina mi sballa lo sfondo del rigo, e poi, dovendolo applicare a più voci in pagine diverse mi pare "sporco". Però non riesco a creare un ID alternativo: se aggiungo nel foglio di stile


#sidebar li rosso {
background: url(images/img11red.jpg) no-repeat left 3px;
padding-left: 20px;
color: #ff0000;
}


e lo associo al[*] che voglio modificare non lo prende. Ho provato anche come classe.

"So" che è facile, ma non ci riesco! Dove sbaglio?


Grazie