Can CSS `nth-of-type` be Limited to Elements with a Specific Class?

Limiting CSS 3 nth-of-type to a Specific Class

Question:

Is there a way to refine CSS 3's nth-of-type selector to only target elements within a specific class?

Background:

Consider a scenario with dynamic sections featuring varied layouts denoted by distinct classes. The goal is to highlight every third section with the ".module" class without affecting other elements.

Solution:

Unfortunately, there isn't a native way to achieve this using nth-of-type. The reason is that nth-of-class is not supported in CSS. Consequently, limiting nth-of-type to a class is not possible.

As an alternative, it is necessary to manually add a new class, such as ".third-module," to every third section with the ".module" class. This customized class can then be targeted using nth-of-type.

HTML:

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

CSS:

.featured {
  width: 31%;
  margin: 0 0 20px 0;
  padding: 0 3.5% 2em 0;
  float: left;
  background: #ccc;
}

.featured.module.third-module:nth-of-type(3n+3) {
  padding-right: 0;
  background: red;
}

.featured.video {
  width: auto;
  padding: 0 0 2em 0;
  float: none;
}

This solution ensures that only the ".module" sections with the ".third-module" class receive the desired styling, as they are specifically targeted by the nth-of-type selector.

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