89 votes

CSS - Syntaxe pour sélectionner une classe dans un identifiant

Quelle est la syntaxe de sélection pour sélectionner une balise dans un identifiant via le nom de la classe? Par exemple, que dois-je sélectionner ci-dessous pour que le "li" intérieur devienne rouge?

 <html>
<head>
    <style type="text/css">
    	#navigation li
    	{
    		color: green;
    	}

    	#navigation li .navigationLevel2
    	{
    		color: red;
    	}
    </style>
</head>
<body>
    <ul id="navigation">
    	<li>Level 1 item
    		<ul class="navigationLevel2">
    			<li>Level 2 item</li>
    		</ul>
    	</li>
    </ul>
</body>
</html>
 

121voto

Runscope API Tools Points 43859
#navigation .navigationLevel2 li
{
    color: #f00;
}

9voto

Andy Ford Points 4595

Cela fonctionnera aussi et vous n’avez pas besoin de la classe supplémentaire:

 #navigation li li {}
 

Si vous avez un troisième niveau de LI, vous devrez peut-être réinitialiser / remplacer certains des styles dont ils hériteront du sélecteur ci-dessus. Vous pouvez cibler le troisième niveau comme suit:

 #navigation li li li {}
 

2voto

Jason Points 934

Voici deux options. Je préfère l'option navigationAlt car elle implique moins de travail à la fin:

 <html>
<head>
    <style type="text/css">
        #navigation li
        {
                color: green;
        }

        #navigation li .navigationLevel2
        {
                color: red;
        }
        #navigationAlt
        {
                color: green;
        }
        #navigationAlt ul
        {
                color: red;
        }
    </style>
</head>
<body>
    <ul id="navigation">
        <li>Level 1 item
                <ul>
                        <li class="navigationLevel2">Level 2 item</li>
                </ul>
        </li>
    </ul>
    <ul id="navigationAlt">
        <li>Level 1 item
                <ul>
                        <li>Level 2 item</li>
                </ul>
        </li>
    </ul>
</body>
</html>
 

1voto

Galen Points 20535
.navigationLevel2 li { color: #aa0000 }

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X