CSS - how to target child with different class using nth-child?

Question

I want to set second child with class active special rules but I cannot target it. I have got 10 items and few of them have got active classes. I need to target second child with active class.
Is there any way to use nth-child and combine two classes?

.container {
  border: 2px solid red;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  column-gap: 3rem;
}

.item {
  background-color: pink;
}
.item.active {
  font-size: 2rem;
}
  // Works when passed 5
.item.active:nth-child(2) {
  background-color: yellow;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item active">4</div>
  <div class="item active">5</div>
  <div class="item active">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

use `.active ~ .active {}` https://stackoverflow.com/a/12652010/8620333 — Temani Afif, Jun 23 '20 at 12:55
@TemaniAfif ~ selects two children, is there any way to exclude last from it? — Freestyle09, Jun 23 '20 at 13:02
`.active + .active` or check this: https://stackoverflow.com/a/35982560/8620333 — Temani Afif, Jun 23 '20 at 13:03
`.active ~ .active:nth-of-type(2n - 1)` or `.active ~ .active:nth-of-type(odd)` — Yousaf, Jun 23 '20 at 13:03
@TemaniAfif yes ofcourse, selectors i commented work when there are 10 items in the `.container` as in OP's html code — Yousaf, Jun 23 '20 at 13:23
@Yousaf not only 10 items but also a specific item orders that's why it doesn't work as it's not generic. — Temani Afif, Jun 23 '20 at 13:25
@TemaniAfif i agree, those selectors are tightly coupled to the order and structure of html code. As you commented, OP could always use `.active + .active` :) — Yousaf, Jun 23 '20 at 13:27

score 1 · Answer 1 · answered Jun 23 '20 at 12:53

Note: Currently only Safari supports the following feature

Use :nth-child and specify the .active requirement.

If you are not using Safari, the following snippet will not work.

.container {
  display: flex;
}

.item {
  background-color: pink;
}

.item.active {
  font-size: 2rem;
}

.item:nth-child(2 of .active) {
  background-color: blue;
}

<div class="container">
  <div class="item">1</div>
  <div class="item active">2</div>
  <div class="item active">3</div>
  <div class="item active">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

CSS - how to target child with different class using nth-child?

1 Answers1