Latest on CSS parent selector [duplicate]

by

The survey culminated in the subject selector (the proper name for the so-fabled “parent selector”) being replaced with the far more versatile :has() pseudo-class, which is documented here (with an interesting anchor name, #relational, I wonder if that will stick).

Implementations will probably only arrive when the specification for this feature is more stable. Currently, with such disruptive changes as completely replacing the subject selector with a pseudo-class, I’m not banking on it happening anytime soon. That said, it is likely that the :has() pseudo-class will stick, but whether it can be implemented in CSS remains to be seen due to its very nature. See this section of the same draft to learn about implementation profiles.

The reason :has() is more versatile is because, with the subject selector, it was never made clear in any draft if a single complex selector could have more than one subject selector (since a single complex selector can only ever have one subject) and/or if functional pseudo-classes such as :matches() accepted the subject selector. But because a pseudo-class is a simple selector, it fits right into the existing selector syntax, and you can reliably assume that :has() will be accepted anywhere a pseudo-class is accepted.

As an example, this makes such selectors as the following quite theoretically possible:

/* 
 * Select any p
 * that is a sibling of a ul
 * that has more than one li child.
 */
ul:has(> li:nth-of-type(2)) ~ p,     /* p follows ul */
p:has(~ ul:has(> li:nth-of-type(2))) /* p precedes ul */

Whereas, using the subject selector, this would only be possible if :matches() accepted the subject selector, which was never stated directly in the spec:

ul:matches(! > li:nth-of-type(2)) ~ p, /* p follows ul */
!p ~ ul:matches(! > li:nth-of-type(2)) /* p precedes ul */

You can also see here why I dislike the name “parent selector” for either form of the selector — it can be used for so much more.

More Related Contents:

  1. Is there a CSS selector for elements containing certain text?
  2. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  3. nth-of-type vs nth-child
  4. ::slotted CSS selector for nested children in shadowDOM slot
  5. nth-child doesn’t respond to class [duplicate]
  6. Select elements by attribute in CSS
  7. Nesting CSS classes
  8. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  9. Matching an empty input box using CSS
  10. Is the CSS :not() selector supposed to work with distant descendants?
  11. What is the difference between ‘>’ and a space in CSS selectors?
  12. SASS: randomly pick background-image from a list
  13. Combining :last-child with :not(.class) selector in CSS
  14. Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]
  15. Why can’t you group descendants in a CSS selector?
  16. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  17. Not CSS selectors
  18. CSS Selector for nth range?
  19. What is this CSS selector? [class*=”span”]
  20. CSS selector (id contains part of text)
  21. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  22. Is there such a thing as an “all inclusive sibling” CSS selector?
  23. CSS selector involving pseudo class first-child and dropcap
  24. Targeting position:sticky elements that are currently in a ‘stuck’ state
  25. Select odd even child excluding the hidden child
  26. Is there an opposite CSS pseudo-class to :hover?
  27. Comma in CSS, multiple selectors using the same CSS
  28. How to skip first child?
  29. How to select all elements whose ID starts and ends with specific strings?
  30. Shorten verbose CSS that repeats combinations of elements and pseudo-classes

Leave a Comment