CSS :has() in Every Browser! 10 Uses

if you want to select elements that do not Have a specific My name is Wes.

apply is going to be applied to The actual parent element that you've attached the dot has onto. However, you can also continue it on. You could say, like, value.

So in that same example, right, you could say if a post

You can do post colon Scott.

And

inside of it has,

not is where Next 1 we have here is based on your pretty complex selector. So at a very basic, it's just to it's a You can style the element differently. Word.

And I think if you even go back to one of the our very first episodes, we said, wouldn't it be nice to be able to, like, add Asterisk

What are the other? Nth child? All of these selectors that we've talked about. You can use it in combination. So you could say, The last part of your selector is always the thing that gets styled.

You can have multiple selectors.

Yeah. Another amazing thing you can do with this is the nth child

colon, has and a parenthesis, and then you pass a child selector that make your table it makes sense. You do have to break it, but you could say And then on every and that's part of like Wes call that the Landing Page Hero, right? And then every other page row has 1 item in it. You know, like, that's really annoying. And you realize, oh, maybe I'm at the end of the pagination, but it's not. They just put 9 on the page,

And if that is true, so if it finds those elements,

there are a whole new world of possibilities

and add an So this this one is wild because you can say I specifically use this on the Syntax branding page

Tolinski.

at the time of recording this episode has has very recently dropped in all browsers, meaning It has.

I don't think people listening if the milling around with a couple of examples on this, and empty elements. I'm sure that will come in handy for somebody at some point, but that's not an everyday thing for me.

And all of this because

Monday. Monday. Monday. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

And most importantly, you're going to have to write less JavaScript to add and remove classes

of being able to select elements

was Having full support at that time, so I I am stoked to be able to actually

I put together just a list of like 10 of the use cases that I've been using it for stuff. That are, of course, has, but and we're trying not to do too much mouth Node here, but essentially you can select the opposite. So when it does not meet that a situation.

in a real capacity without having to make any sacrifices.

people might not understand that At the rate that it's been in Chrome and Safari for

Boss, and Scott, El Toro Loco,

has of course it's going to be able to select items that are inside of something. But things that are now unlocked that were never before possible in CSS.

soft skill, web development, the hastiest, the craziest, the tastiest web development treats. Coming in hot. Here is Wes, Barracuda,

We're gonna be talking about all of the amazing different use cases for has. We're gonna be really talking about practical examples

If you could have a little paragraph tag that says there was form validation errors and it's an uneven number, so they can't split it. So you say, all right, well, all of the divs with the class of card, but not the one that is currently being hovered, which is really neat because like Scott said, in CSS, oh, this is layout 1 by 2. This is layout just heading. This is layout image.

You can get started using has, and honestly, I think you should because It is a wonderful API and something as we were building the ESLint site, I was wishing over and over hasty treat, we're gonna be going in on HAZ.

a form input is invalid, you might programmatically find the element before it You can now select Like CSS Grid. Like, how many times have you wanted to and make the opacity whatever or scale them down, change the font size and then take the one that is currently being hovered and scale it up transparent. Really handy.

use has, And don't forget to subscribe in your podcast player or drop a review if you like this show.

Welcome to Syntax.

In this stuff. All of this stuff can feel like you're kind of navigating,

a symbol or something like that to indicate down arrow. Yeah. To indicate that there is more here. Right? So that way Wes your users are hovering over what will be a nested drop down,

Then maybe you'll want to style the the parent anchor that is a part of that drop down. And so you could say if a list item has a ul, then you could say

And what I did is I said, all right, as a sibling to your actual pnpm. Assuming you put all the give me an article.

and LogodashBlack.

even if it's not like a drop down menu. But if you want to, like, let's say you have a horizontal ruler or a border bottom

The last 1 we have here is attribute matching. So scrolling through a huge table, and I always go bug eye when I'm trying to read across a table.

there's some nested elements inside that link, maybe you don't want to put a border bottom on that link. And now you can If my parent has

a colon If you essentially have anything in your has plus a selector, Anything

on a link on all of your links. But then if

massive drop down menus where you'd hover over 1, then you'd have to hover over another one, and then skillfully

more if you want to say, all right, when my Div has more than 5 paragraph tags in it, then where you know, the page break inside.

to hover over another nested line.

drag your mouse to the right a real word or if it's a, like, a fake word.

Yeah.

Next one we have here is targeting specific layouts.

people don't use those all the time, and it's kind of frustrating.

But it's it's so nice now just to be able like, you could have,

You can have them as siblings. You can have an element in between them. You can have it, like, wrapped in a div. Like, there's so many use cases, especially with React. Before we had

Yeah. You don't want your divs to dictate stuff. Yeah, you're doing your stuff. Especially like like the reason people do use I just the reason people do use extra divs is often they need to put an event listener on like the entire wrapper of that component You know? And, like, That's not that's not a bulletproof solution, but it worked well there where I was like, I didn't wanna add a class of black to something. But if the But this been in Safari

name for and IDs on those elements so that they They group together, and they're accessible.

You're you're kinda out of luck for these sibling selectors.

and

Now this is going to grab from Denver. With me JS always is Wes Bos. What's up, Wes? Hey. I'm pretty excited about this because

That's called the sibling selector. I'm not being Yeah. Or is that the, yeah. Yeah. The plus. Yeah. Yeah. I always get confused with the naming between plus till they and, a greater than sign. Either way. It's it's it's called the next element or next sibling selector, meaning that the one that comes immediately after, the tilde is all future siblings. Yep. So the next sibling selector, which is the plus sign, you can use this with has inside of the has to really great effect because And then it will select when the card has

has, and then inside of has plus and then your selector.

and and then it exists before Right? If a list item has a UL,

inception a little bit. Right? You're you're going in and out. So it's important have a, an interesting viewpoint on how this stuff works because,

You could do asterisk, Head on over to syntax Scott for a full archive of all of our shows.

anything an input. That input it it's funny to call it a drop down because now Wes think about a drop down, but Very, very common in the past and and still a degree to this day would be these

Then inside of the has plus your input with user invalid, and now you can have access directly to that if it precedes it. So, it's Cool. Because in the past, like you've mentioned, Wes, you're always going, here's the thing, after the thing. Yeah. Right? But now we can go, hey. Wait. Here's the thing before the thing, and I think that Really opens up worlds.

again, you can get lost in the sauce here. But,

another example might be that let let's say you have,

you could do, So you can have a selector that is more specific and then go upwards in the chain

the selector that you're trying to save, which

if you write the nth child I was like, yeah. What about it? No. Like, Microsoft literally rolled out something to disable ask yourself,

t d nth child 3 is being hovered.

Totally. That's tough. Right? Yeah.

And it was previously been kind of hard with the tilde sign, but that was it. Right? Yep. With With has now you can say body, the literally the highest element That is all of the tips we have for you today with CSS has some pretty cool ones.

To style an entire table row when you're higher hovering over a TD, with this, you could say, okay. Well,

A a Sass loop would be handy here. Yeah. Okay. You've heard of, container queries. How about, quantity queries?

Like the card example, but also be useful for, when all of the children have empty. So you might have a div with a bunch of empty divs inside of it. And if that's the case, any of the headings, h 1 through 6, And it is only a heading, colon, only child,

Then select all of the t d nth child threes

select every card that is not being hovered right now, which is the other ones. And a I had been, like, Often React will just people just throw a div around their components and then you have all this div soup forever. Like, it oh, we might have 20 columns. You have to write it 20 times. You know? Yeah.

to select

that would be useful for

Blows my mind saying, It's it's super handy to be able to especially with labels. Like,

I tried to go in it and it's only doable less than

TD elements

This card, Essentially anything

in combination with the nth child,

selectors for every possible column. So you could say Mhmm. When I had to do this

a let's say here's an example. Right? You have a card.

if you are

Good.

Now let's make a new selector Because that it's a cool it's a it's It's a working solution, but it's not a flexible solution. No. We that's where we need, like, a fast loop. That's like the 1 a couple of times where I'm just like,

we can actually use has after and then maybe add JS long as it became before another selector,

And style them this way. So you you can, but you have to write that nth child selector to that.

that says

downwards JS in You go from body to main to class to thing. Right? Or just you're selecting a class and and and defining these styles.

with writing selectors, are selecting on your page that has that invalid state will then cause the thing that you're trying to select to be able to gain style. And this is pretty cool. You again, you could use this for, like, a field set. Right?

and here let's take a broad look at has. We've talked about it on this show, but that doesn't mean that everybody's heard those episodes or or knows what we're talking about. So has Yes. It has, of course, dropped in all browsers.

always,

What if you could and then however many items. So if you want to style thing that has more

But

Select upwards. Like, what I I remember talking about that in 2011,

we've

people have been talking about whispers.

has you know, like a container query or anything like that. It's just a selector. It's a bit of a hack. You're utilizing

Comes in to allow us to select

I wanna say since the beginning of CSS, check it out, century.i

upwards.

you might want to,

individual card elements. Right?

And you when somebody's hovering over Node of those cards, maybe it's like you have 5 different features.

Then pretty wild. And you can combine it with CSS not. I think those things are less of an issue.

I've written this one in JavaScript several times. So imagine you have

And when somebody hovers over one of those features,

Scott card hover.

Image source says black anywhere in it. Or if the image source ends in a PNG, maybe put a checkered background on there so you can show that it is A single card that is being hovered. So Scott cards, colon, has for specific use cases. So a lot of times and hide and show that paragraph in order to use checkbox to increase? And I know that we have like the the empty brackets

you can probably, of course, check your own stats, but Of course, the styles have to go on the video there. But wouldn't it be cool if you could style the the parent article only when Vercel selector has been met? And that's That's what has is right. You can select any piece down the line then style it a little bit differently. And I had, like, 4 different layouts,

Certainly before you reach JavaScript, error class to it. There's so much to it. And

What percentage do I need to get to? And, honestly, you should probably have a percentage of usage with your team to say, alright. When it hits this percentage of browser users, which you can find on Can I Use,

IE 11 on most of their computers. It's hard. That's a you problem at that point. And, like, yeah, a couple of years ago, maybe IE 11, but you don't need to support IE 11 anymore unless you have some very obtuse use case, when the body has that Node page hero. So check if that selector JS on the page. And if it is,

And now that it's in Firefox, fragments in React, but

But now that it's in all the major ones, you can at least monitor it to say, like, alright.

15 months, so both of them well over a year. Stuff. And now that it's in, I know a lot of people were just And in that you have a bunch of

threshold for their support. They are. Yeah. Yeah. Bos, like, I think a lot of the people that say, well, what about older browsers So I wrote some JavaScript to detect if we were on the Node page. And if it was, I would hide the logo in the header and show the logo in the

But Pre seeding? Post seeding? Pre seeding is be preceding is before. Yeah. I think you did. Immediately post seeding? I'm trying to sound too smart here.

Each of the cards to the actual element. So if you're saying, like, you could select the sibling element with the plus sign. You could select future elements then the CSS that you then

of global usage support. I can't use CSS gradients yet. Yeah.

then make the background white.

well, if you're on syntax. Fm, you should probably be using a browser that supports has. It's

Peace. Peace.

can I maybe reach for has here? when you're building something, you'll just throw an extra class on something. If it has a video or that's really Wes the power starts to open up is combining it with a lot of the and then immediately proceeding or proceeding after? What's the after? make it a little bit bigger. Right? Stuff. And you can do that with a hover style. But what if you wanna make the other elements that are not being hovered

I I feel like

Then we're able to implement these things because I think that's an important metric to actually understand and have? But that's all I got here. I'm excited to have has, And I'm gonna start using it definitely because,

Wes the images path contains the word black, just yet. It's

card has an image

just like to say that. Like, I understand that you might have to you might have to. That's very valid. But, like, I had somebody the other day being like, what about IE 11?

If you have a little bit of freedom there in terms of what you can support you know what? I I think this is something that

Vercel already using it because the Firefox numbers for some people are below inside of that, let me select a video.

had a background of black.

For 21 months, almost 2 years, and it's been in Chrome for

So you're saying, you know, People who are newer to CSS might not understand why that's so monumental, but it, like you mentioned, unlocks a a 1,000,000 different use cases that we've never had access to. And, honestly, I think, Wes, even though we're gonna be hitting some really cool ones today, I think we're we're just opening the doors of the cool stuff. All these new use cases people haven't even stumbled upon

it would be cool to say, like, if it has maybe I have a web page that has a bunch of coding examples. And I don't want to show someone who wants to hide the answer so they can just try it themselves. Right. So you can have a checkbox

u l inside of a u l. Right? Yeah. So you could say something if a list item has

when there are

3 items in something,

in a really fascinating way. And I I think that these this is, like, one of the areas that we're gonna see some really wild use cases because, is invalid, and you wanna select the label that precedes it. So you could suit do label has,

Sometimes to see that something went wrong. So even just styling the button a little bit differently, you know, or

So you could use essentially the direct

colon, nth child.

Yeah. We have a lot of interesting

But in this case, you could say Next Node here is the anywhere selector. This one is super cool.

functions now within CSS.

a specific amount of items in it, but maybe it has less items. And maybe you wanna be able to change the styling based on how many items are within that card.

because it's it's it's funny because it's not actually like a,

You could say,

a page and there's, like, 9 items per page, but there's, like, 2 items per row. And that last Often Wes find ourselves putting the input in the label, but it's totally valid to have your label a div with a class of cards.

Or and adding extra divs leads to some complexity. And now with CSS Has and subgrid, you have to write less CSS.

And yeah, CSS grid, you can auto fit it and min max it. But sometimes you literally want to say, all right, when this has We have the Syntax logo.

a UL in it.

let me select when this has 3, 6, 4, 9 elements. That's not really possible unless, again, you write a whole bunch of Node out a little bit. Or what if you want the other elements that are not being hovered to get smaller and for the one you are hovering to writing my last couple talks for conferences,

Last,

We talked about a couple of weeks ago.

beyond this and even like Talk about ESLint styles.

4 or more items. I want to style it a little bit differently.

5 children to it, which is really interesting selector

than 5 direct children. You could say nth child 5 n using that following selector,

sibling or the direct child selector, so the the greater than sign, then you could use the at the asterisk,

selectors.

Put a little mask on the bottom and fade it out to show that there's like a there's more text

Then never break this from 1 page to another. It's okay to throw it on to the next printed page.

it may have

you're typically doing that JS, like, a nested

maybe you want to show a skeleton Node, maybe you want to flag it for debugging, put a red border around and say, hey, Hey. Nothing rendered out here.

Like, sometimes you're on This one is select all the siblings, but not me.

Oh, this is very funny. I'm I'm into, My name is Scott Tolinski. I'm a developer

the type of content that they had without me having to go in and say, oh, okay. Well, This is this type of layout. The layouts are dictated by the content inside of them, and I think that's I I started googling about post seeding.

then

input validation. Right? You wanna have the header turn red if there's a input problem? You could do it as long as it, to be able to solve the bugs that you definitely have. So,

Alright. Well, let's get back into it here. Another interesting thing is you could style anything on your page

Post seeding. I would love to make this a thing wise if it's not a real word.

But When I was has I find that super Sanity,

And then you can style it a little bit differently. Or if you have an h two, you have an image and an image, like 2 months ago and I didn't have has checked then go grab the nav logo, which is somewhere totally different, and display none on it or or center the items.

This is one that I don't know how often I would run across this in like a website.

A field set could be determined. If you haven't used a field set, it's a way of grouping input fields.

I can't tell if it is Yeah. Next one here, this is this one's something I think would've been, very useful in the past and probably still very useful. If you have, like, a drop down CSS navigation,

like, where we were. We have a bunch of logos like we have LogodashWhite style something differently when it has 3 items versus 4 items? Which if that's the case, then you're probably not saying, well, what about all you living on Twitter? What about bro, but what about in, CSS gradients only have 96% No. I got you. I don't think that's a word.

Post seeding. Post seeding. Immediately Bos seeding your h so you got an h two, and then immediately after that, you have an image. Right? Wes the cards the rapper of all of it has oh, we got 3 more here. Empty children. I don't know if this one's all that useful, but I thought it was kind of cool. You could say, like, we have just empty. And that's when a element has no children.

is valid or user user hyphen invalid. Right? Then you can use that to be able to then select its parent. And that, Too oftentimes, Because we have the nth child selector inside of CSS,

I would have, like, a couple different layouts. You know? Like, I would have Node slide that's just a word, you know, and I make the font super big and stretch it all the way across, and then I'd have another slide that's just an image or a video. And If that's the case, then I would want to stretch the the image all the way up and over and use a object fit cover. And then sometimes I have, like, a heading and 1 image. And then another time I have a heading with 2 images. And then based on, like, those, like, 4 or 5 different layouts I have for my talk, I was like adding a class of okay, I'm in this state.

It seems like you aren't the 1st person to ever say that The the the Wikipedia it's going to select essentially the thing before it as long as the rules work. So If you wanted to select literally

to be able to style just about anything. Right? Again, you wanna put an outline on the whole body that's ready. You could say body. If the body has an input that is user hyphen invalid, then, of course,

And it was so nice because if I thought, you know what? I need to add a paragraph tag to describe a little bit more. Or, oh, you know what? I had 2 images there. Let me remove 1. The layouts would just immediately snap to

anything on your page based on

style it this way. And then if the article has page for post seeding is, like, 1 sentence. I don't oh, it's not even Wikipedia. What is this? Junk. Wikipedia.

contains that property or contains that. I guess you would have to do it in the Bos, but you could have something where you have

Bos has input checked. So when your checkbox is checked, Vercel Pnpm blurred answers checked. So when the body has a checkbox called blur answers and when it is checked, then and h two

Then So only when this post has a video style the H2 inside of it a certain way. So you can go even further into parent child relationships and You just have to quantify the parent what that has.

select this thing that's somewhere totally different on the page. So an example might be You can probably start using this in in your day to day coding now. Yeah. Totally. I I mean, at least, if you

styling. So in the past, you've been able to say when this checkbox has a colon checked state,

Literally anywhere on your page doesn't have to be at the top of the document, could be in the footer. If you want it, you can say the body has

You don't have to worry about the structure of your HTML

it's totally valid, and that is Jeff. Yep. Alright. Thanks, everyone, for tuning in. We will catch you later.

some of them were not accessible. So I hadn't, stuff. Like, posted too much info, but I've come to a couple situations or grayscale it. And it makes reading tables a lot easier if you really want to just focus in on that 1 row that you're working on. Yeah. I guess the next challenge would be to how to focus in on a column as well. Right. I had I've done that.

Go and find all the answers, so Scott answer, and and blur it 10 pixels.

the parent selector,

like, really tight and specific use cases,

If you are writing JavaScript, you will need a tool to track and log all those errors, which is where Sentry comes in, Sentry dot I o. This podcast is presented by Sanity, so check them out if you are writing code that you're shipping to users. You need visibility

which means that you can select things upwards in the chain.

is essentially

Yeah. Well, before we do that, let's think about this. If you're writing less JavaScript, it means you're gonna have less JavaScript related bugs and errors. But yeah. It's a bit of a hack for sure, but you're utilizing

Oh, alright. Well, before we get too deep into, Name is Scott.

pnpm, that has

if there are form validation errors or not. Yeah. And what's cool about this is that you can go backwards and then forwards again. Right? So you can go backwards to say, hey. If this form

You could have that whole field set be marked as invalid if some

an invalid thing has, and then inside of your has pnpm

depending on, And I got rid of all of those, and I just said, if the article so you you determine, okay, somebody is hovering Node of my cards, then go inside of me and find

individual child is invalid in there. Yeah. How many times have you Filled out a form and something is invalid. So you have to Yep. And you're just like, oh, didn't submit. Like, you don't understand. Like, nothing happened. Didn't submit. You have to scroll up to see the validation,

then select the button that is within it. So you're going backwards to look at the form itself, then you're going forwards down into the button.

has If either of those 2 things exists inside of a post,

don't need JavaScript for that anymore because I could say Get all the other menu items in it, then don't put a border on the bottom of me.

Yeah. Next 1 here is the previous element selector, which is is pretty amazing. You can use with the sibling selector, which is the plus sign.

on the Syntax website. On the Node page, many, many months already.

Or on the syntax website,

And when I was doing the the hero, I was like, well, we can't do double logo.

On the syntax website has the syntax logo in the header.

And then in that, you you pass ESLint has video