Home >Web Front-end >CSS Tutorial >Why are My Alternating Colors Resetting When Using :nth-child(even/odd) with a Class?

Why are My Alternating Colors Resetting When Using :nth-child(even/odd) with a Class?

Susan Sarandon
Susan SarandonOriginal
2024-11-08 07:13:021045browse

Why are My Alternating Colors Resetting When Using :nth-child(even/odd) with a Class?

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

You aim to apply alternating colors to list items with the "parent" class. However, you encounter problems with the colors resetting. To resolve this, consider the following:

Solution:

Since CSS rules are applied top-to-bottom, the :nth-child(even/odd) selectors will potentially override previous color settings. To address this, use the general sibling combinator (~) to toggle colors after non-"parent" elements:

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

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

Explanation:

  • The first two rules set the alternating colors for "parent" elements.
  • Subsequent rules use the ~ combinator to toggle colors after non-"parent" elements.
  • Each set of rules alternates the colors with increased specificity, ensuring the desired behavior.

Limitations:

While this method allows you to achieve alternating colors for a limited number of non-"parent" elements, there is a limit to how far you can extend this approach.

The above is the detailed content of Why are My Alternating Colors Resetting When Using :nth-child(even/odd) with a Class?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn