Style des éléments imbriqués du nième enfant sur plusieurs parents

Vous cherchez une solution pour styliser des éléments imbriqués spécifiques dans différentes structures parent, considérez le balisage suivant :

• one
• two

• three

• four

Le but est d'appliquer des styles à "un" et "trois", qu'ils soient ou non les premiers enfants de chaque

.

Limitation de :nth-child()

Les tentatives d'utilisation de :nth-child() échouent car elles ne s'appliquent qu'aux éléments qui partagent le même parent. Dans ce scénario, le sélecteur CSS .foo li:nth-child(1), .foo li:nth-child(3) ciblerait uniquement les premiers enfants de chaque

.

Alternative Solutions

JavaScript :

L'utilisation d'une bibliothèque comme jQuery vous permet de sélectionner des éléments à l'aide des puissantes capacités de filtrage de JavaScript. Par exemple, le script suivant ciblerait les premier et troisième éléments

• du conteneur .foo :

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

  Marquage explicite des éléments :

  Vous pouvez marquer explicitement les éléments souhaités avec des classes ou des identifiants pour permettre leur sélection via CSS. Par exemple, ajouter des classes aux premier et troisième éléments

•  :

• one
• two

Ensuite, vous pouvez utiliser CSS pour cibler les éléments marqués :

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