Target the First Visible Element After the First Active Element in CSS

debugcn Published at Dev

Kirk Ouimet

Getting into some pretty gnarly CSS here. In the below scenario, I want to only match #4. This is what I have going on:

<ul class="tabMenu">
  <li class="hidden">1</li>
  <li class="active">2</li>
  <li class="hidden">3</li>
  <li>4</li> <!-- I want this one's blood -->
  <li class="hidden">5</li>
  <li class="hidden">6</li>
  <li>7</li>
  <li class="hidden">8</li>
  <li>9</li>
</ul>

Here are my attempts, which are failing:

/* Only matches the next immediate li (so it works if #3 is not hidden) */
.tabMenu li:not(.hidden).active + li:not(.hidden) a {
  color: red;
}

/* Matches #4 and #7, I just want #4 */
.tabMenu li:not(.hidden).active ~ li:not(.hidden) a {
  color: red;
}

After 30 minutes on this I have decided to bring my problem to you. Please help!

Raj Nathani

Taking advantage of the way CSS sibling selectors work will be the way to go here.

Step 1: Let us perform a selection of all the elements after the first active one which does not contain the class hidden or active.
```
li.active ~ li:not(.hidden):not(.active) {
    color:red;
}
```
Step 2: Let us remove the target of all the siblings after the targeted elements. The CSS selector ~ selects all sibling elements which come after it, and NOT including it. Thus by applying it to the li elements after the target, we successfully remove from all the elements except the first one which was targeted in step 1.
```
li.active ~ li:not(.hidden):not(.active) ~ li {
    color:inherit;
}
```