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

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.


Not that I am aware of. There isn't a siblings selector either.

This might work, though:

#parent_of_green_guys > p:not(.green_guys) {
  foo: bar;
}

Or if you aren't looking for ps with class attributes:

#parent_of_green_guys > p:not([class]) {
  foo: bar;
}

My scenario was a little different but I wanted to select siblings of an input element to display one while it was active and another if it was left invalid.

My html was like this and I was unable to select the invalid text.

<input name="importantAnswer">
<div class="help-text"></div>
<div class="invalid-text"></div>

I was able to get around it by embedding the siblings in an adjacent one and using child selectors on that.

<input name="importantAnswer">
<div class="messages">
   <div class="help-text"></div>
   <div class="invalid-text"></div>
</div>


.help-text, .invalid-text {
   visibility:hidden;
}

.input:active +.messages > .help-text {
   visibility:visible;
}

.input.invalid:visited +.messages > .invalid-text {
   visibility:visible;
}

And it worked.