Comment cibler un nième enfant auprès de plusieurs parents en CSS ?

CSS : cibler un nième enfant sur plusieurs parents

Problème

Considérez la structure HTML suivante :

<code class="html"><div class="foo">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
  <ul>
    <li>three</li>
  </ul>
  <ul>
    <li>four</li>
  </ul>
</div></code>

Le le but est de styliser les éléments de la liste « un » et « trois » en rouge. Cependant, en utilisant le sélecteur CSS :

<code class="css">.foo li:nth-child(1),
.foo li:nth-child(3)</code>

style le premier enfant de chaque ul à la place.

Solution

Approche CSS uniquement :

Malheureusement, il n'est pas possible de sélectionner des nièmes enfants parmi plusieurs parents en utilisant uniquement CSS. Ni :nth-child() ni les combinateurs frères et sœurs ne permettent de telles sélections.

Manipulation Javascript ou DOM :

Pour réaliser un tel ciblage, vous pouvez recourir à Javascript ou DOM techniques de manipulation. Par exemple, en utilisant jQuery :

<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)').css('color', 'red');</code>

Marquage de classe ou d'ID :

Vous pouvez également marquer explicitement les éléments de la liste cible avec des classes ou des identifiants. Par exemple :

<code class="html"><div class="foo">
  <ul>
    <li class="target">one</li>
    <li>two</li>
  </ul>
  <ul>
    <li class="target">three</li>
  </ul>
  <ul>
    <li>four</li>
  </ul>
</div></code>

Ensuite, stylisez en utilisant les classes ou les identifiants marqués :

<code class="css">.foo .target {
  color: red;
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!