CODEWITHSUNDEEP
css
Meisenmann
Meisenmann

Reputation: 129

Select the element after next element in CSS

The + operator selects the first element that is placed immediately after the given elements. But i want to select the next element that fulfils a condition.

In the following example I want to remove the separator lines from the selected element. The separator lines are added before each visible element (but the first). So i have to remove it from the selected element and the element after.

The difficult thing now is that elements can become invisible. This means that the next element in the DOM does not necessarily have to be the next visible element.

span[selected] {
  color: red;
   font-weight: bold;
}

span:not([visible]) {
  display: none;
}
 
span + span::before {
  content: ' | ';
}

span[selected]::before,
span[selected] + span::before {
   color: white;
}
<span visible>A</span>
<span visible>B</span>
<span >C</span>
<span visible selected>D</span>
<span>E</span>
<span visible>F</span>
<span visible>G</span>

But i looking for something like this to select the next visible element.

span[selected]::before,
span[selected] + span[visible]::before {
  color: white;
}

Thank you

Upvotes: 1

Views: 177

Answers (1)

Temani Afif
Temani Afif

Reputation: 272723

Maybe like below

span[selected] {
  color: red;
   font-weight: bold;
}

span:not([visible]) {
  display: none;
}
 
span + span::before {
  content: ' | ';
}

span[selected]::before,
span[selected] ~ span[visible]::before {
   color: white;
}
span[selected] ~ span[visible] ~ *::before  {
  color:inherit;
}
<span visible>A</span>
<span visible>B</span>
<span >C</span>
<span visible selected>D</span>
<span>E</span>
<span visible>F</span>
<span visible>G</span>

Upvotes: 1

Related Questions