Style de nièmes enfants spécifiques sur plusieurs parents

Lorsque vous stylisez des éléments imbriqués à l'aide du sélecteur de nièmes enfants, il est essentiel de noter que le sélecteur fonctionne dans un contexte monoparental. Cela peut entraîner des difficultés lors du ciblage d'éléments enfants spécifiques sur plusieurs parents.

Le problème :

Considérez le balisage suivant :

    
one
        
two
    
three
    
four
    

Le but est de styliser les premier et troisième éléments li dans .foo. En utilisant le CSS suivant :

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

Cette approche ne fonctionnera pas car le nième enfant sélectionne le premier et le troisième enfant de chaque ul.

La solution :

Utiliser CSS seul, il n'est pas possible de cibler des nièmes enfants auprès de plusieurs parents. Cependant, il existe des solutions alternatives :

• JavaScript : Les bibliothèques comme jQuery facilitent la manipulation des éléments du DOM et en sélectionnent des spécifiques, tels que $('.foo li:eq( 0), .foo li:eq(2)').
• Marquage explicite : Ajoutez des classes ou des identifiants au premier et au troisième li éléments explicitement, tels que :

    
one
        
two
    
three
    
four
    

Ensuite, stylisez-les en utilisant les classes nouvellement ajoutées :

.foo li.first,
.foo li.third
{
    color: red;
}