CODEWITHSUNDEEP
htmlcsscss-selectors
zagzter
zagzter

Reputation: 327

Select nth-child after Class

So, I have a ul element list and I want to select the first 3 li elements after .active class

<ul>
 <li>The #1</li>
 <li>The #2</li>
 <li class="active">The #3</li>
 <li>The #4</li>
 <li>The #5</li>
</ul>

I was thinking something like this:

ul li.active ~ li:nth-child(n+3)

But it does not work. Anyone can help me out with this?

P.S.: Class .active is dynamically changing, so any ul li:nth-child(n+3) will not help.

Upvotes: 1

Views: 1277

Answers (1)

adprocas
adprocas

Reputation: 1913

It appears you can not do this using nth options on selectors based on your markup and how the hierarchy works.

If you're looking to give the three li selectors after the li.active selector a red background, you can target them within your css in one call by appending + li as many times as needed, grouping the selectors together, like so:

li.active + li, 
li.active + li + li, 
li.active + li + li + li {
  color: red;
}
<ul>
 <li>The #1</li>
 <li>The #2</li>
 <li class="active">The #3</li>
 <li>The #4</li>
 <li>The #5</li>
</ul>

Upvotes: 6

Related Questions