Sélectionnez la classe div la plus proche en css

Question

Veuillez consulter le html suivant

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

Ici je veux sélectionner slide-active et 2nd marg class après slide-active . Comment puis-je les sélectionner ?

Par exemple :

Si slide-active arrive avec .first alors je dois sélectionner .third .

Si slide-active arrive avec .second alors je dois sélectionner .fourth .

Answer 1

Vous pouvez utiliser le sélecteur de frère et sœur pour le sélectionner.

.slide-active + .marg + .marg

Snippet pour mettre en évidence celui qui est sélectionné lorsqu'il est actif.

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

Quand la classe est dans une autre :

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

Nota: Cela ne fonctionnera pas si vous êtes dans la dernière ou l'avant-dernière diapositive.