Can CSS `nth-of-type` Select Elements Based on a Specific Class?

Can CSS 3 nth of type be Restricted to a Class?

In CSS 3, the nth-of-type selector can be used to select specific elements based on their position within a group of similar elements. However, this selector does not allow for targeting elements based on their class.

Question:

Is it possible to apply nth-of-type to a specific class? For instance, how can you target every third element with the class .module?

Answer:

Unfortunately, CSS does not provide a built-in nth-of-class selector. This means it is not directly possible to restrict nth-of-type to a particular class.

Solution:

To achieve the desired effect, you can apply a new class to every third .module manually. This can be done using JavaScript or a preprocessor like Sass.

Here's an example using JavaScript:

const modules = document.querySelectorAll('.featured.module');
for (let i = 2; i < modules.length; i += 3) {
  modules[i].classList.add('module--nth-of-type-3n');
}

Once the additional class has been applied, you can use the following CSS rule to target every third .module:

.featured.module.module--nth-of-type-3n {
  /* Your desired styling here */
}

While this workaround may not be as elegant as a dedicated nth-of-class selector, it allows you to achieve the desired functionality using existing CSS features and JavaScript.

The above is the detailed content of Can CSS `nth-of-type` Select Elements Based on a Specific Class?. For more information, please follow other related articles on the PHP Chinese website!