Скачать или смотреть CSS nth-child() of a Subclass: Why It Doesn't Work and How to Fix It

Discover why the `nth-child()` selector may fail to target subclasses and learn an effective solution for styling your `visibility` elements in CSS.
---
This video is based on the question https://stackoverflow.com/q/64242162/ asked by the user 'Christoph Reinhardt' ( https://stackoverflow.com/u/12181153/ ) and on the answer https://stackoverflow.com/a/64242434/ provided by the user 'Hao Wu' ( https://stackoverflow.com/u/10289265/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: css nth-child() of a subclass not Working

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the CSS nth-child() Selector Issue

When working with CSS, many developers encounter situations where they want to style specific elements based on their order in the DOM. One of the most commonly used selectors for this purpose is the nth-child() selector. However, there's a catch: the nth-child() selector only counts child elements, not classes. This can lead to confusion and frustration, especially when trying to style elements with specific classes.

The Problem

Let's consider a typical scenario where you want to format visibility elements differently using the nth-child() selector. In the example provided, the developer tries to style the first and second instances of a class called visibility like this:

[[See Video to Reveal this Text or Code Snippet]]

At first glance, this seems like a reasonable approach. However, it doesn't work as expected because the nth-child() selector is counting all children of the parent, not just the ones with the visibility class. Therefore, the first .visibility element is actually the 7th child in the .owl-stage element — and the second is the 8th child.

Why nth-child() Doesn't Work with Classes

The simplest way to explain this issue is that there is no such thing as an nth-class selector. The nth-child() selector focuses solely on the order of elements within a parent node without concerning itself with classes.

To effectively style specific elements based on their classes while considering their order in the DOM, we need to employ a different approach — specifically, using adjacent sibling selectors.

The Solution: Using Adjacent Sibling Selectors

To achieve the desired styling for the visibility elements, we can utilize the adjacent sibling selector (+ ). This selector allows us to select an element that is next to another element, making it possible to style our visibility elements based on what comes before them.

Implementation

Here's how you can modify your CSS to achieve the desired effect:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

First Rule:

.owl-stage div:not(.visibility) + .visibility selects the first instance of the visibility class that directly follows a non-visibility div. When this div appears, it will have a blue background.

Second Rule:

.owl-stage div:not(.visibility) + .visibility + .visibility selects the second instance of the visibility class following the same logic as before. It will have a red background.

Example Markup

For the CSS to work properly, ensure your HTML structure matches what we've discussed and shown in the initial code block.

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Styling specific subclasses within the DOM can pose challenges, particularly when relying on the nth-child() selector. Understanding that nth-child() counts all children irrespective of classes enables you to adopt more effective solutions, such as using adjacent sibling selectors. By applying the methods discussed above, you'll be equipped to manage and stylize visibility elements or any subclass effortlessly within your CSS frameworks.

By mastering these techniques, you can enhance your styling capabilities and ensure that your web projects appear exactly as you envision, avoiding common pitfalls associated with CSS selectors.