0
votes

sélectionnez le deuxième niveau li

Je dois sélectionner le deuxième niveau li et définir la couleur bleue, puis sélectionner le troisième niveau et définir le rouge avec uniquement css. Pouvez-vous m'aider?

<body>
    <ul>
      <li>Warehouse
        <ul>
          <li>Second Level
            <ul>
              <li>10 cabbages</li>
              <li>5 avocados</li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>third level
            <ul>
              <li>5 pumpkins</li>
              <li>20 carrots</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>

html css

0 commentaires

3 Réponses :

2
votes

pour sélectionner des niveaux en css, utilisez simplement css comme ceci:

    <body>
            <ul>
              <li>Warehouse
                <ul>
                  <li>Second Level
                    <ul>
                      <li>10 cabbages</li>
                      <li>5 avocados</li>
                    </ul>
                  </li>
                </ul>
                <ul>
                  <li>third level
                    <ul>
                      <li>5 pumpkins</li>
                      <li>20 carrots</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </body>

  body li > ul > li {
    color: blue;
    }
    
    body li > ul > li li {
    color: red;
    }

body li > ul > li { /**seconde level**/
        color: blue;
        }
        
        body li > ul > li li { /**third level **/
        color: red;
        }

4 commentaires

c'est proche mais j'ai besoin que tout le deuxième niveau de li avec les deux puces soit bleu et le même pour le troisième niveau mais rouge

@ChristianMorales c'est le cas avec ce code

lorsque vous cliquez sur Exécuter l'extrait de code, il affiche le deuxième niveau - en bleu, mais 10 choux et 5 avocats sont tous deux rouges. J'ai besoin qu'ils soient tous les deux bleus.

le troisième niveau doit être rouge avec 5 citrouilles et 20 carottes

1
votes

Vous n'avez besoin que d'un Play CSS avec ceci

<body>
    <ul>
      <li>Warehouse
        <ul class="blue">
          <li>Second Level
            <ul>
              <li>second level</li>
              <li>second level</li>
            </ul>
          </li>
        </ul>
        <ul class="red">
          <li>third level
            <ul>
              <li>third level</li>
              <li>third level</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>

ul li {
color: #000
}
ul.blue li {
color: #0097FF
}
ul.red li {
color: #ff0000
}

2 commentaires

Merci pour l'aide mais je ne peux pas ajouter de classes au html uniquement css

Je n'ai plus le cerveau pour taper un code sans classes haha mais attendez je vais essayer après

0
votes

vous pouvez utiliser le :nth-child(x) avec x étant le numéro de l'enfant dans la structure que vous voulez adresser.

<body>
    <ul>
      <li>Warehouse
        <ul>
          <li>Second Level
            <ul>
              <li>10 cabbages</li>
              <li>5 avocados</li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>third level
            <ul>
              <li>5 pumpkins</li>
              <li>20 carrots</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>

ul li ul:nth-child(1) li {
  color: blue;
}

ul li ul:nth-child(2) li {
  color: red;
}

0 commentaires