Comment alterner les couleurs des éléments avec :nth-child lorsque vous ignorez des éléments qui ne correspondent pas ?

:nth-child(pair/impair) Sélecteur avec classe

En CSS, le sélecteur :nth-child(n) sélectionne des éléments qui sont le nième enfant de leur parent. Lorsque n est impair, le sélecteur nième enfant (impair) sélectionne les éléments impairs, et lorsque n est pair, le sélecteur nième enfant (pair) sélectionne les éléments pairs.

Considérez le balisage HTML suivant , où nous voulons appliquer les sélecteurs :nth-child pour lister les éléments avec la classe "parent":

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

Application du CSS suivant au HTML ci-dessus :

.parent:nth-child(odd) {
    background-color: green;
}

.parent:nth-child(even) {
    background-color: red;
}

De façon inattendue, la couleur des éléments est réinitialisée après le premier élément non-.parent. En effet, le sélecteur :nth-child s'applique à tous les éléments de la liste, pas seulement à ceux avec la classe "parent".

Pour obtenir le comportement souhaité, nous devons utiliser le combinateur général des frères et sœurs (~) , qui sélectionne un élément qui précède un autre élément dans l'arborescence DOM. En combinant cela avec le sélecteur :nth-child, nous pouvons alterner les couleurs des éléments ".parent" à chaque fois qu'un élément non-.parent est rencontré :

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* after the first non-.parent, toggle colors */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* after the second non-.parent, toggle again */
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: green;
}
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) {
    background-color: red;
}

Cette approche nous permet d'alterner les couleurs des éléments ".parent" tout en ignorant les éléments non-.parent. Cependant, le nombre d'éléments non-.parent que le sélecteur :nth-child peut anticiper est limité, cette technique peut donc ne pas être pratique pour les très longues listes avec de nombreuses classes alternées.

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!