Complex CSS selector for parent of active child [duplicate]

by

According to Wikipedia:

Selectors are unable to ascend

CSS offers no way to select a parent or ancestor of element that satisfies certain criteria. A more advanced selector scheme (such as XPath) would enable more sophisticated stylesheets. However, the major reasons for the CSS Working Group rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.

And for anyone searching SO in future, this might also be referred to as an ancestor selector.

Update:

The Selectors Level 4 Spec allows you to select which part of the select is the subject:

The subject of the selector can be explicitly identified by prepending
a dollar sign ($) to one of the compound selectors in a selector.
Although the element structure that the selector represents is the
same with or without the dollar sign, indicating the subject in this
way can change which compound selector represents the subject in that
structure.

Example 1:

For example, the following selector represents a list item LI unique child of
an ordered list OL:

OL > LI:only-child

However the following one represents an ordered list OL having a unique child,
that child being a LI:

$OL > LI:only-child

The structures represented by these two selectors are the same,
but the subjects of the selectors are not.

Although this isn’t available (currently, November 2011) in any browser or as a selector in jQuery.

More Related Contents:

  1. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  2. Can CSS detect the number of children an element has?
  3. Can the :not() pseudo-class have multiple arguments?
  4. Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
  5. Can I target a :before or :after pseudo-element with a sibling combinator?
  6. What is the difference between :focus and :active?
  7. CSS selector – element with a given child [duplicate]
  8. What does a[href^=”…”] do in CSS?
  9. In CSS what is the difference between “.” and “#” when declaring a set of styles? [duplicate]
  10. Universal selector * and pseudo elements
  11. How to only show certain parts with CSS for Print?
  12. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  13. Why use an attribute selector to match classes?
  14. Is it possible to use a CSS wildcard in the middle of an attribute selector?
  15. CSS selector to get deepest element of specific class in the HTML tree
  16. CSS Specificity and Inheritance
  17. Zebra striping a table with hidden rows using CSS3?
  18. Vertically centering content of :before/:after pseudo-elements
  19. Difference between the selectors div + p (plus) and div ~ p (tilde)
  20. Are CSS selectors case-sensitive?
  21. CSS combinator precedence?
  22. What is caret symbol ^ used for in css when selecting elements?
  23. nth-child for every two table rows
  24. Why are my CSS properties being overridden/ignored?
  25. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  26. CSS specificity or inheritance?
  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