How Can I Select a Parent Element Based on its Child Element in CSS?

CSS Selectors for Parent-Child Relationships

Question:

How do you create a CSS selector that matches a parent element containing a specific child element?

Background:

Matching an object element that contains a param element using a simple selector (e.g., OBJECT PARAM) fails because it targets the param element instead.

Answer:

Notably, CSS lacks parent selectors, a feature that has been repeatedly proposed but remains unavailable in any current or projected standard.

To achieve the desired behavior, alternatives must be employed:

• jQuery/JavaScript:

  • $("object param").closest("object")
  • document.querySelector("object param").closest("object")

• CSS Workarounds:

  • Introduce additional class annotations to facilitate parent-child targeting within CSS rules.

Additional Resources:

Consult the following resources for further insight into this limitation:

• [Is there a CSS parent selector?](https://stackoverflow.com/questions/3398742/is-there-a-css-parent-selector)
• [CSS Parent/Ancestor Selector](https://codereview.stackexchange.com/questions/8989/css-parent-ancestor-selector)
• [Complex CSS selector for parent of active child](https://stackoverflow.com/questions/26492566/complex-css-selector-for-parent-of-active-child)

The above is the detailed content of How Can I Select a Parent Element Based on its Child Element in CSS?. For more information, please follow other related articles on the PHP Chinese website!