CSS selector – element with a given child [duplicate]

by

Is it possible to select an element if it contains a specific child element?

Unfortunately not yet.

The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.

A Note About Specification Changes

This is a disclaimer about the accuracy of this post from this point onward. Parent selectors in CSS have been discussed for many years. As no consensus has been found, changes keep happening. I will attempt to keep this answer up-to-date, however be aware that there may be inaccuracies due to changes in the specifications.

An older “Selectors Level 4 Working Draft” described a feature which was the ability to specify the “subject” of a selector. This feature has been dropped and will not be available for CSS implementations.

The subject was going to be the element in the selector chain that would have styles applied to it.

Example HTML

<p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>

This selector would style the span element

p span {
    color: red;
}

This selector would style the p element

!p span {
    color: red;
}

A more recent “Selectors Level 4 Editor’s Draft” includes “The Relational Pseudo-class: :has()“

:has() would allow an author to select an element based on its contents. My understanding is it was chosen to provide compatibility with jQuery’s custom :has() pseudo-selector*.

In any event, continuing the example from above, to select the p element that contains a span one could use:

p:has(span) {
    color: red;
}

* This makes me wonder if jQuery had implemented selector subjects whether subjects would have remained in the specification.

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Is there a “previous sibling” selector?
  3. Which characters are valid in CSS class names/selectors?
  4. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  5. CSS selector for first element with class
  6. What does the “+” (plus sign) CSS selector mean?
  7. Is there a CSS selector by class prefix?
  8. How to use JSF generated HTML element ID with colon “:” in CSS selectors?
  9. How do I select an element based on the state of another element in the page with CSS?
  10. What does an asterisk (*) do in a CSS selector?
  11. Does the order of classes listed on an item affect the CSS?
  12. Select all child elements recursively in CSS
  13. CSS “and” and “or”
  14. Using the last-child selector
  15. Why doesn’t the selector h3:nth-child(1):contains(‘a’) work?
  16. What is the difference between :focus and :active?
  17. How to select label for=”XYZ” in CSS?
  18. CSS: styled a checkbox to look like a button, is there a hover?
  19. In which direction do selector engines read, exactly?
  20. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  21. Can I colour backgrounds of selected items in HTML select options with CSS only?
  22. CSS3 combining selectors with OR instead of AND
  23. Why doesn’t this CSS :not() declaration filter down?
  24. Angular 2: How to style host element of the component?
  25. How to show the first N elements of a block and hide the others in css?
  26. What is the difference between :before and ::before?
  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