parent selectors – CSS-Tricks

Meet `:has`, A Native CSS Parent Selector

Chris Coyier — Mon, 12 Jul 2021 19:45:00 +0000

The reasons that are often cited that make container queries difficult or impossible is things like infinite loops—e.g. changing the width of an element, invalidating a container query, which changes the width again, which makes the container query take effect, etc. But that was solved with containment. A “parent selector”, or :has as it is now been officially dubbed (I like it, that’s how jQuery rolled, although Adrian pointed out a tweet noting that it’s more versatile), has traditionally had similar problems. Things like requiring “multiple pass” rendering which is too slow to be acceptable.

Brian Kardell says:

Primarily, even without :has() it’s pretty hard to live up to performance guarantees of CSS, where everything continue to evaluate and render “live” at 60fps. If you think, mathematically, about just how much work is conceptually involved in applying hundreds or thousands of rules as the DOM changes (including as it is parsing), it’s quite a feat as is.

Engines have figured out how to optimize this based on clever patterns and observations that avoid the work that is conceptually necessary – and a lot of that is sort of based on these subject invariants that has() would appear to throw to the wind.

The fact that there is a spec now is super encouraging, and that it has Igalia’s eye on it. Apparently, some of the performance problems have either been surmounted or, through testing, determined to be negligible enough to remain a shippable feature.

Adrian Bece digs into it all!

The team at Igalia has worked on some notable web engine features like CSS grid and container queries, so there is a chance for :has selector to see the light of day, but there is still a long way to go.
What makes relational selector one of the most requested features in the past few years and how are the developers working around the missing selector? In this article, we’re going to answer those questions and check out the early spec of :has selector and see how it should improve the styling workflow once it’s released.

Let’s cross our fingers. I’ve been watching this for 10 years and trying to document use cases.

To Shared Link — Permalink on CSS-Tricks

Meet `:has`, A Native CSS Parent Selector originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Can I :has()

Chris Coyier — Fri, 04 Jun 2021 14:37:59 +0000

I just joked that we’re basically getting everything we want in CSS super fast (mostly referring to container queries, my gosh, can you imagine they are actually coming?). Now we might actually get parent selectors?! As in .parent:has(.child) { }. Traditionally it’s been nope, too slow, browsers can’t do it. Brian Kardell:

Igalia engineers have been looking into this problem. We’ve been having discussions with Chromium developers, looking into Firefox and WebKit codebases and doing some initial protypes and tests to really get our heads around it. Through this, we’ve provided lots of data about performance of what we have already and where we believe challenges and possibilities lie. We’ve begun sketching out an explainer with all of our design notes and questions linked up

Like I said in 2010: Want!

Here’s some other use cases in the blog post and comment section.

To Shared Link — Permalink on CSS-Tricks

Can I :has() originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

A Use Case for a Parent Selector

Chris Coyier — Tue, 31 Dec 2019 17:06:54 +0000

Having a “parent selector” in CSS is mentioned regularly as something CSS could really use. I feel like I’ve had that thought plenty of times myself, but then when I ask my brain for a use case, I find it hard to think of one. Well, I just had one so I thought I’d document it here.

A classic parent/child:

Say it makes a lot of sense for this parent to have hidden overflow and also for the child to use absolute positioning.

.parent {
   overflow: hidden;
   position: relative;
}

.child {
   position: absolute; 
}

Now let’s say there’s one special circumstance where the child needs to be positioned outside the parent and still be visible. Hidden overflow is still a good default for the vast majority of situations, so it’s best to leave that rule in place, but in this very specific situation, we need to override that overflow.

.special-child {
   position: absolute; 
   bottom: -20px; /* needs to be slightly outside parent */
}

/* Not real, but just to make a point */
.special-child:parent(.parent) {
   overflow: visible;
}

That selector above is fake but it’s saying, “Select the parent of .special-child,” which would allow that override as needed. Maybe it’s like this:

.parent < .special-child {

}

…which is selecting the element on the left rather than the right. Who knows? Probably both of those are problematic somehow and the final syntax would be something else. Or maybe we’ll never get it. I have no idea. Just documenting a real use case I had.

You might be thinking, “Why not just use another special class on the parent?” I would have, but the parent was being injected by a third-party library through an API that did not offer to add a class of my choosing on it. Ultimately, I did have to add the class to the parent by writing some custom JavaScript that queried the DOM to find the .special-child, find the parent, then add the class there.

Do y’all have some other use-cases for a parent selector?

Here’s one from Uzair Hayat:

My project has an which is wrapped in a
. The
has a few design elements which need to take effect once the is in :focus. I could have used ::before and ::after pseudo-elements, but inputs do not support those as they are replaced elements. Right now, I juse JavaScript to detect if the input is in focus and apply a class to the parent div. I wish I could do…

input:focus:parent(div):after {
    display: block;
    /* display design changes when focused */
}

A Use Case for a Parent Selector originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The `:focus-within` Pseudo Class

Chris Coyier — Fri, 12 May 2017 12:04:34 +0000

Nice find by Ian Devlin:

The :focus-within pseudo class becomes active when an element itself has focus or if any of its descendants does.

Selecting a parent element based on children is lonnng awaited. The crown jewel of that is :has(). I wonder if that’s getting closer.

To Shared Link — Permalink on CSS-Tricks

The `:focus-within` Pseudo Class originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Caching the Current Selector (&) in Sass

Chris Coyier — Tue, 14 Feb 2017 22:24:15 +0000

The & character in Sass is unique in that it represents the current selector. It changes as you nest. Let’s say you are nested, but you want access to a selector back up the nesting a bit. The trick is to cache & and use it deeper in the nesting. Like:

.parent {

  $this: &;
  
  &--elem {
    display: inline-block;
    
    &:hover,
    #{$this}__variation--active & {
      background: red;
    }
    
  }
  
}

Which compiles to:

.parent--elem {
  display: inline-block;
}
.parent--elem:hover, .parent__variation--active .parent--elem {
  background: red;
}

(Thanks to Sergey Kovalenko for sending in this trick!)

Meaning it allowed you to use .parent and .parent--elem within a selector at the same time. A little esoteric, but might be useful sometimes. Sort of avoids situations where you might need to use @at-root to back out all the way and re-make selectors.

Sergey’s gist has examples that are BEM-based:

$gray-very-light: #ccc;

.pagination {
  display: flex;
  padding: 0;
  list-style: none;

  $this: &;

  &__item {
    border: 1px solid $gray-very-light;

    & + & {
      margin-left: .5rem;
    }
  }

  &__link {
    display: block;
    padding: .25rem .5rem;
    text-decoration: none;

    &:hover,
    #{$this}__item--active & { // Here we get .pagination from $this variable
      background-color: $gray-very-light;
    }
  }
}

Output:

.pagination {
    display: flex;
    padding: 0;
    list-style: none;
}

.pagination__item {
    border: 1px solid #ccc;
}

.pagination__item + .pagination__item {
    margin-left: .5rem;
}

.pagination__link {
    display: block;
    padding: .25rem .5rem;
    text-decoration: none;
}

.pagination__link:hover,
.pagination__item--active .pagination__link {
    background-color: #ccc;
}

Caching the Current Selector (&) in Sass originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.