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

by

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.

More Related Contents:

  1. What does the “>” (greater-than sign) CSS selector mean?
  2. Is there a CSS selector for elements containing certain text?
  3. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  4. css3 nth of type restricted to class [duplicate]
  5. ::slotted CSS selector for nested children in shadowDOM slot
  6. wildcard * in CSS for classes
  7. nth-child doesn’t respond to class [duplicate]
  8. Select elements by attribute in CSS
  9. Nesting CSS classes
  10. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  11. Is the CSS :not() selector supposed to work with distant descendants?
  12. What is the difference between ‘>’ and a space in CSS selectors?
  13. Combining :last-child with :not(.class) selector in CSS
  14. Why can’t you group descendants in a CSS selector?
  15. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  16. Not CSS selectors
  17. What is this CSS selector? [class*=”span”]
  18. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  19. Is the :before pseudo-element allowed on an input[type=checkbox]?
  20. CSS select multiple descendants of another element
  21. Select all ‘tr’ except the first one
  22. What are the rules around whitespace in attribute selectors?
  23. CSS – First child without certain class
  24. CSS select first element with a certain class
  25. Correct terms and words for sections and parts of selectors
  26. Why are spaces used to separate things in css
  27. How to skip first child?
  28. How to select all elements whose ID starts and ends with specific strings?
  29. selector for nth nested elements
  30. Latest on CSS parent selector [duplicate]

Leave a Comment