web-dev-qa-db-fra.com

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>
csscss-selectors
69
Jeremy
#navigation .navigationLevel2 li
{
    color: #f00;
}
82
John Sheehan

Cela fonctionnera également 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 {}
6
Andy Ford
.navigationLevel2 li { color: #aa0000 }
1
Galen

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>
1
Jason