Complex CSS Selector For Parent of Active Child

Complex CSS selector for parent of active child

Unfortunately, there's no way to do that with CSS.

It's not very difficult with JavaScript though:

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.

Is there a CSS parent selector?

There is currently no way to select the parent of an element in CSS, at least not a way that works across all browsers.

If there was a way to do it, it would be in either of the current CSS selectors specs:

  • Selectors Level 3 Spec
  • CSS 2.1 Selectors Spec

That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation.

li:has(> a.active) { /* styles to apply to the li tag */ }

However, as of 2022, it is only supported by Safari.

In the meantime, you'll have to resort to JavaScript if you need to select a parent element.

Latest on CSS parent selector

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.

CSS style for parent instead of child?

You simply cannot traverse up the DOM in CSS. You will need to use JavaScript.

Here is an article explaining why: http://snook.ca/archives/html_and_css/css-parent-selectors

Long story short, it's due to the way CSS is read by the browser, and by introducing it, it would increase the performance hit by a factor of ten (at least!), because it would need to read every single node multiple times to see whether or not it fits the profile.

It's a nice thought, but it's simply not viable.

Select parent n layers up in the tree using CSS?

Based on this article I found titling CSS4 Preview, it will be possible in CSS4 to style parent elements. The article shows that it would be possible to style parent elements like the following:

$div > div > div > div.active { border: 1px solid #ccc; }

(Given example would style the div nested 3 layers up in the tree related to div.active)

Going back to my app, using PHP and inline CSS, I would be able to control the n (nesting depth).

Until CSS4 though, I will use some kind of jQuery solution.

Selecting an element that has a specific child?

No, CSS does not allow you to select elements based on their descendants.

Apply style to parent if it has child with CSS

It's not possible with CSS3. There is a proposed CSS4 selector, $, to do just that, which could look like this (Selecting the li element):

ul $li ul.sub { ... }

See the list of CSS4 Selectors here.

As an alternative, with jQuery, a one-liner you could make use of would be this:

$('ul li:has(ul.sub)').addClass('has_sub');

You could then go ahead and style the li.has_sub in your CSS.

Selector to combine Asterisk and parent element?

Is there any selector, that includes the parent element too?

No. See Is there a CSS parent selector? for a more detailed explanation.

It has been suggested with css level 4, and rejected : Complex CSS selector for parent of active child



Related Topics



Leave a reply



Submit