How Can I Target Every Third Element with a Specific Class Using CSS `nth-of-type`?

CSS 3 nth of type Restricted to Class

The nth-of-type selector allows you to select every nth child of a particular type. However, it can be challenging to limit this selection to a specific class.

Problem:

You want to target every third .module element dynamically, regardless of their markup. However, nth-of-type calculates based on the element type, not the class.

Solution:

Currently, there is no direct way to limit nth-of-type to a specific class. One workaround is to manually add an additional class to every third .module element.

For example, in the provided HTML:

<section class="featured module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO (3)</h1>
</section>

<section class="featured module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO (6)</h1>
</section>

Then, apply the following CSS styles:

.featured.module.third {
  padding-right: 0;
  background: red;
}

This will now style every third occurrence of the .module class with the additional .third class.

Note:

This workaround requires manual maintenance as you add or remove .module elements. For more advanced scenarios, consider using JavaScript or CSS preprocessors to automatically generate the necessary classes.

The above is the detailed content of How Can I Target Every Third Element with a Specific Class Using CSS `nth-of-type`?. For more information, please follow other related articles on the PHP Chinese website!