Select the 2nd nearest div class in css [duplicate]

Question

Please see the following html

<div class="slick-track">
  <div class="marg first slide-active">1</div>
  <div class="marg second">2</div>
  <div class="marg third">3</div>
  <div class="marg fourth">4</div>
  <div class="marg fifth">5</div>
  <div class="marg sixth">6</div>
  <div class="marg seventh">7</div>
</div>      

Here I want to select slide-active and 2nd marg class after slide-active . How I can select this?

For example:

If slide-active is coming with .first class , then I have to select .third.

If slide-active is coming with .second , then I have to select .fourth.

Answer 1

You can use sibling selector to select it.

.slide-active + .marg + .marg

Snippet to highlight the selected one when active.

.slide-active + .marg + .marg {background: #ccf;}

<div class="slick-track">
  <div class="marg first slide-active">1</div>
  <div class="marg second">2</div>
  <div class="marg third">3</div>
  <div class="marg fourth">4</div>
  <div class="marg fifth">5</div>
  <div class="marg sixth">6</div>
  <div class="marg seventh">7</div>
</div>

When the class is in another one:

.slide-active + .marg + .marg {background: #ccf;}

<div class="slick-track">
  <div class="marg first">1</div>
  <div class="marg second slide-active">2</div>
  <div class="marg third">3</div>
  <div class="marg fourth">4</div>
  <div class="marg fifth">5</div>
  <div class="marg sixth">6</div>
  <div class="marg seventh">7</div>
</div>

Note: This will not work when you are in the last or last but one slide.