CSS peut-il cibler des éléments du nième enfant sur plusieurs parents ?

Cibler un nième enfant parmi plusieurs parents en CSS : une énigme non résolue

Dans le domaine du CSS, la possibilité de sélectionner des éléments enfants spécifiques au sein d'un parent est depuis longtemps un incontournable pour les concepteurs de sites Web. Cependant, lorsqu'il s'agit de cibler des éléments nième enfant sur plusieurs parents, le chemin devient semé d'embûches.

Considérez le scénario suivant : vous disposez d'un conteneur div.foo avec plusieurs éléments ul, chacun contenant un ensemble de li articles. Vous souhaitez appliquer un style spécifiquement aux premier et troisième éléments li sur tous les uls de div.foo.

À première vue, le CSS suivant peut sembler une solution simple :

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color:red;
}

Cependant, cette approche échoue en raison de la limitation inhérente du sélecteur :nth-child() de CSS. Il ne peut cibler que les éléments enfants du même parent immédiat. Ainsi, le CSS ci-dessus stylisera uniquement le premier enfant de chaque ul, ce qui entraînera le résultat indésirable suivant : http://jsfiddle.net/hTfVu/

Pour obtenir le résultat souhaité, les sélecteurs CSS ne peuvent pas suffire à eux seuls. Les bibliothèques JavaScript telles que jQuery fournissent une solution pratique :

$('.foo li:eq(0), .foo li:eq(2)')

Ce code sélectionne les premier et troisième éléments li dans chaque ul contenu dans div.foo.

Alternativement, vous pouvez marquer explicitement le premier et troisième éléments li utilisant des classes ou des identifiants, puis ciblez-les via CSS en conséquence. Cependant, cette approche nécessite une modification de la structure HTML, ce qui n'est pas toujours réalisable.

En conclusion, cibler des éléments du nième enfant sur plusieurs parents reste une énigme non résolue au sein des capacités natives de CSS. Pourtant, en adoptant des bibliothèques JavaScript ou en utilisant un balisage HTML explicite, ces limitations peuvent être surmontées, permettant ainsi un style précis et nuancé dans des structures de documents complexes.

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!