Ne pas appliqué aux éléments enfants

Bonjour,

Actuellement j'ai un menu qui a la structure suivante :

<ul class="menu">
	<li class="niv0"> <a>Menu1</a>
		<ul class="sub_menu1">
			<li class="niv1"> <a>Menu2</a>
				<ul class="sub_menu2">
					<li class="niv2"> <a>Menu3</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Lorsque l'utilisateur sélectionne l'un des menus principaux (ceux qui se trouvent dans une li.niv0), je souhaite que celui-ci s'affiche en rouge. Pour cela, j'ajoute une classe (avec Javascript) au menu sélectionné lorsque l'utilisateur clique dessus.

Le problème, c'est que dans mon CSS, je n'arrive pas à faire en sorte que seuls les menus principaux soient en rouge, sans que les menus enfants ne deviennent eux mêmes rouges.

Comment puis-je faire ?

Bonjour,

Deux solutions : cibler plus précisément le "parent" afin qu'il ne soit plus parent du reste; ou, redéfinir les éléments enfants.

C'est la magie de l'héritage

Merci pour ta réponse rapide.

Qu'est-ce que tu entends par cibler plus précisément le parent ?

Je n'avais pas pensé à redéfinir le style des enfants. J'ai testé, et effectivement sa marche parfaitement.

tu peux essayer du coté des pseudo elements du type :first-child ou :last-child

Je pense notamment à ul#menu li:first-child

cptim a écrit :
Qu'est-ce que tu entends par cibler plus précisément le parent ?

Sans doute utiliser les sélecteurs CSS 2.1 à bon escient. Par exemple:

#nav > li {
  /* Styles qui s'appliquent aux LI de premier niveau */
}
#nav > li > ul > li {
  /* Styles qui s'appliquent aux LI de deuxième niveau */
}

Ce genre de chose.

Je ne connaissais pas ces sélecteurs, mais c'est bien pratique.

Merci pour vos solutions.
Modifié par cptim (03 Jun 2011 - 11:58)