Select the 2nd nearest div class in css

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.

score 8 · Accepted Answer · answered Mar 19 '18 at 10:32

8

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.

answered Mar 19 '18 at 10:32

Praveen Kumar Purushothaman

164,888
24
203
252

1

... though that's a limitation of the question and not your answer :) – BoltClock Mar 19 '18 at 10:39
@BoltClock Yep! `:D` – Praveen Kumar Purushothaman Mar 19 '18 at 10:41
1

brilliant answer .. Thank you . – Abilash Erikson Mar 19 '18 at 10:41
1

sorry friend for delaying accept the answer . – Abilash Erikson Mar 19 '18 at 11:19
1

@abilasher No worries mate! Have a nice day. – Praveen Kumar Purushothaman Mar 19 '18 at 11:20
please see this https://stackoverflow.com/questions/49669738/responsive-grid-box-with-image-automatically-resize – Abilash Erikson Apr 08 '18 at 07:15
@abilasher Sure... – Praveen Kumar Purushothaman Apr 08 '18 at 08:02
i got answer friend . sorry for troubling you – Abilash Erikson Apr 08 '18 at 08:29
@abilasher Happy that you have got it man. Enjoy the weekend. – Praveen Kumar Purushothaman Apr 08 '18 at 08:30

Select the 2nd nearest div class in css

1 Answers1