Select second closest div class in css

Question

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 the slide-active and the second marker class after the slides. How can I choose this?

For instance:

If it slide-activecomes with class .first, then I have to choose .third.

If slide-activecomes with .second, then I have to choose .fourth.

Answer 1

You can use the selector to select it.

.slide-active + .marg + .marg

Snapshot to highlight the selected when it is 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>

Run codeHide result

When the class is in another:

.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>

Run codeHide result

Note. This will not work if you are in the last or last slide.