After searching through the MDN CSS documentation, I was unable to find any Combinators that can target the specific element I want to style.
/* second-span red when first-span is present */
[first-span] ~ [second-span] {
color: red;
}
/* first-span blue ONLY when second-span is present */
/* HOW TO ? */
[first-span] /* combinator doesn't exist */ {
color: blue;
}<p>
<span first-span="">I am #1</span><br>
<span second-span="">I am #2</span>
</p>
<p>
<span first-span="">I am #1</span>
<!-- no second span -->
</p>
<p>
<span second-span="">I am #2</span>
</p>I'm attempting to apply a style to an element only if a specified sibling is found among the neighboring elements below it.
In the provided code snippet, the first CSS statement successfully styles an element if the left-hand selector is located among preceding siblings. However, I'm struggling to find a combinator that achieves the opposite effect.
Is there a way to accomplish this task?