Can I Style a Parent Element Based on its Child Elements in CSS?

Styling Elements Based on Child Elements in CSS

Is it possible to apply CSS styles to an element based on the child elements it contains?

Yes, CSS provides a way to achieve this using the :has() pseudo-class. It allows you to target elements based on whether they contain a specified descendant element.

Syntax:

div:has(child-selector) {
  /* CSS styles for elements containing the child */
}

Example:

To give a div element a red border if it contains a child div with a class of "a":

div:has(div.a) {
  border: solid 3px red;
}

Note: The :has() pseudo-class is supported in modern browsers but not in older browsers like Internet Explorer.

Alternative Using JavaScript (jQuery):

If you need compatibility with older browsers, you can use JavaScript with jQuery's :has() selector:

$('div:has(div.a)').css('border', '1px solid red');

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