How to Alternate Element Colors with :nth-child When Skipping Non-Matching Elements?

:nth-child(even/odd) Selector with Class

In CSS, the :nth-child(n) selector selects elements that are the nth child of their parent. When n is odd, the nth-child(odd) selector selects odd-numbered elements, and when n is even, the nth-child(even) selector selects even-numbered elements.

Consider the following HTML markup, where we want to apply :nth-child selectors to list items with the class "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>

Applying the following CSS to the HTML above:

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

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

Unexpectedly, the color of the elements reset after the first non-.parent element. This is because the :nth-child selector applies to all elements in the list, not just those with the class "parent".

To achieve the desired behavior, we need to use the general sibling combinator (~), which selects an element that precedes another element in the DOM tree. By combining this with the :nth-child selector, we can alternate the colors of ".parent" elements every time a non-.parent element is encountered:

.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;
}

This approach allows us to alternate the colors of ".parent" elements while skipping non-.parent elements. However, the number of non-.parent elements that the :nth-child selector can look ahead is limited, so this technique may not be practical for very long lists with many alternating classes.

The above is the detailed content of How to Alternate Element Colors with :nth-child When Skipping Non-Matching Elements?. For more information, please follow other related articles on the PHP Chinese website!