Is there such a thing as an "all inclusive sibling" CSS selector?

Question

My HTML:

<p>Doggies</p> <p class="green_guys">Froggies</p> <p>Cupcakes</p> <p>Piggies</p> 

An all inclusive sibling selector (as I wish it to be), when used to select green_guys' siblings, would select the doggies cupcakes and piggies.

Other Selectors:

The + selector (a.k.a. adjacent sibling selector) would only select the cupcakes:

.green_guys + p {     /* selects the <p> element that immediately follows .green_guys */ } 

The ~ selector (a.k.a. general sibling selector) would only select the cupcakes, and piggies:

.green_guys ~ p {     /* selects all <p> elements that follow .green_guys */ } 

Answer 1

There is no sibling combinator that looks backward or around, only the adjacent and general sibling combinators that look forward.

The best you can do is determine a way to limit selection only to these p elements with the same parent, and then select the p children that are :not(.green_guys). If the parent element has an ID of #parent, for example, you can use this selector:

#parent > p:not(.green_guys) {     /* selects all <p> children of #parent that are not .green_guys */ } 

However the above will still match your p elements even if none of them have the class. It is currently not possible to select the siblings of an element only given the existence of said element (which is the purpose of a sibling combinator — to establish a relationship between two sibling elements).

---

Selectors 4's :has() will hopefully rectify this without the need for a preceding-sibling combinator, resulting in the following solution:

p:has(~ .green_guys), .green_guys ~ p {     /* selects all <p> elements that are siblings of .green_guys */ } 

This will not match anything if none of the children of the parent element have the class.