Choose the child element that comes after a specific class

Question

Choose the child element that comes after a specific class

Currently, I am dealing with a ul element list and my goal is to select the first 3 li elements that come after the .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 have tried using the following CSS selector:

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

Unfortunately, this approach did not work as expected. Can anyone provide me with some guidance on how to achieve this?

Additional Note: The .active class dynamically changes, so simply using ul li:nth-child(n+3) will not suffice.

html css css-selectors

Answer 1

Answer №1

It seems that utilizing the nth selectors might not be the best approach based on the structure of your markup and how the hierarchy is set up.

If you want to add a red background to the three li elements following the li.active element, you can achieve this by targeting them with a single CSS rule by adding + li multiple times in succession and grouping the selectors together, like this:

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>

Answer 2

It seems that utilizing the nth selectors might not be the best approach based on the structure of your markup and how the hierarchy is set up.

If you want to add a red background to the three li elements following the li.active element, you can achieve this by targeting them with a single CSS rule by adding + li multiple times in succession and grouping the selectors together, like this:

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>

Choose the child element that comes after a specific class

Answer №1

Similar questions

Is there a way to extract a particular value from a JSON URL and transfer it to a JavaScript variable?

Getting hold of HTML elements in a div on a different page

Is there a way to create a dropdown menu that stretches across the entire page width when the burger menu is hovered over?

Customizing the colors of the Input field in the Material UI Text Field component with CSS styling can elevate the overall

Displaying negative values highlighted in red on Datatables platform

Ways to display a GIF image as a pop-up during data loading in an MVC application

Retrieve nodes that are children of another node

When attempting to click the submit button, the action of submitting a form using jQuery/AJAX is not functioning as expected

Modify the height of one or more <span> elements within a table cell

Why does Chrome DevTools evaluate JavaScript before recalculating styles?

Does border-padding actually exist in web design?

Retrieve the labels associated with highlighted text in a JTextPane

Revising text for real-time editing

WordPress website displaying two identical logos

Using jQuery to toggle visibility on click within WordPress

How to Customize a Horizontal Rule for Internet Explorer

Struggles encountered when choosing the initial visible item

Positioning text at the bottom of a label

Troubleshooting: Node.js with Express - Issue with Loading Static JavaScript File in HTML

Displaying a JSON array response on an HTML page with JavaScript and jQuery