I can has() new CSS Selector?!

Boss, and Scott

CSD.

Welcome to Zendesk on this Monday hasty treat. We're gonna be talking about some new s CSS selector. Some of which you can use today, some of which you can't, and some of which we're just we've been waiting for these things for a long time. I'm talking about has, where, and is. These things are going to really allow us to write some cleaner CSS and to do some things that we've never been able to do before in the history of CSS.

is Wes Boss. Hey, everybody. I'm excited about this new has selector.

Yeah. Me too. Who's not excited for has selector? I'll tell you. The only people Who aren't excited for the HAZ selector are the people who have not, heard about what it can do.

So before we get into HAZ, Let's get into 2 of our amazing sponsors today. That is Magic Bell and LogRocket.

Yeah. Magic Bell. It's a notification inbox for your product, for your app or whatever you call it. If you add Magic Bell to your product, you can get announcements, billing, workflow, other notifications.

That's kinda cool because if you think about how hard it is to integrate notifications into your app, you might think, Super simple. I'll just have an array of notifications and push into that array when the person needs to see it. But then you're like, okay, well, they want to be emailed, but see it in the app, but it's also a push notification.

But don't push it if they saw it in the app. And what if I send 10 notifications in a minute? Then should they get it. Ten emails all at once. Gets complicated really quickly. That's why you need something like [email protected].

They have smart notifications.

They have a really good, SDK which you can integrate into all of your applications.

Check it out at magicbell.com.

The free plan gives you up to a 100 mouse monthly active users, and, Use the coupon code syntax f m. It's gonna get you 10% off the 1st 12 months. Thanks to you Magic Wealth for sponsoring. Sick. This episode is also sponsored by LogRocket

at logrocket.comforward/syntax.

LogRocket is the perfect place to truly see it. How your website is functioning. And I I don't mean see as in just, like, kind of see. I mean, see how your website is functioning in a scrubbable video replay. That's right. You get actual access to a visual as to what is happening on your site. Not only that, but you could access to the AEROW log, console log, network request, all that and more So you can see exactly what's happening in your site. When the thing that broke your site broke your site, the user clicked on a button, and it it broke. Didn't work. This submission didn't happen. They couldn't even send you a contact form to say, hey. Your website doesn't work. So now you can actually see them typing into the contact form. Hey. Your stupid It doesn't work, hitting go, and then having an error pop up or or even worse, no error pop up. And then you could see that happen as you cry and fix the bug and solve it eventually. So check it out at log rocket.comforward/ syntax.

It is a really, really cool modern solution to a problem that we've all been dealing with for a long time. It. Alright. Let's talk about

another problem that we've been dealing with for a long time. Can I can we just talk about a hilarious thing about having kids real quick is that you just said stupid website? And I immediately was like, don't say stupid.

I am.

We just went through trying to get our kids to stop saying stupid. And now every time like, my parents said it the other day. I was like, hey. We don't say stupid.

My my my kids love to say that things are the dumpster Or the trash can. They'll be like, this is a dumpster, and they're like, don't say it's a dumpster. Even though that's not, like, a bad thing, it's just like, I don't know. Why are we why Are we calling something a dumpster? Like, someone tells a dumpster. They're not a dumpster. What what where did you even get that? My kids were calling everyone poopy head for the longest time, and they would meet people in public and be like, Hey, poopy head. So now we have to say we call people banana head. So that's oh, banana head is where we're at. Yep. Okay. Banana head. That's that's pretty good. Banana head is way better than poopy head. My, yeah, my my daughter is at the age where She'll like she'll say something like, we'll we'll do the game like, what raise your hand if if you like this, and everybody raises their hand or whatever.

And she'll be like, raise your hand if you like poo poo, and then she'll, like, look around to see everyone's reaction. She's, like, click quickly darting off. What what are they gonna do if I say poo poo here? Just the whole world could get thrown on its head. Alright. Let's talk about Something that we've been all wanting forever in CSS. I don't know about US, but I remember going back to, like, the very early days of me writing CSS. And I was thinking, like, this would be really great if I could style the parent of something based on whatever the child is. That just seems like something that we should have in CSS, and it has never been here until now. Is that something that you have wanted in CSS for a long time, or have you been All the time. I like it. Like I want to style this like

in WordPress. I want to style this blog post differently if it has a video Or if there is literally anything inside of this thing, I don't want to style that thing. I want to say if it's inside of it, then style differently. And we've had to do either server side stuff or JavaScript checks and throw a class on there. And so it's and I remember being like, it would be nice to just put, like, a star beside the like, you write a selector, and then you put a star beside the actual element that this style should be applied to.

And finally, we we kinda have that. It's not a star. It's colon has,

and it will check inside of it. Right? Yeah. So let's get into it. Before we talk about has, let's do a quick we'll be saying I like to do a little jargon check first because some people, You know, if you're newer to to CSS or you're newer to this stuff in general, you hear the word selector, and you might not know exactly what we're talking about.

In CSS, when we say the word selector, we're basically saying that it's any path it to your item that is going to select that given item. So when you're writing CSS, you would say, like, dot for the class name and have a class name. That's a selector. It. But so is p space and then the dot in the class. That's a selector. The selector is the thing that is selecting your item. Okay? We're we're picking out items From the DOM, and we're going to style them. So the selector is that. So when we say that the has Pseudo, what what did they this is it's not a pseudo element. What is this a a, a pseudo The has is a pseudo class. That's what it's called. A pseudo I thought it was a pseudo selector.

No. It's a pseudo class. You're right. I always call them pseudo selectors. Yeah. So has is a pseudo class,

and It basically is the parent selector even though it's not necessarily explicitly that. But what it does is it matches if an element contains another selector.

So the most basic bare bones example of this is saying, let's say you wanted to style a paragraph If it has an anchor tag in it, you would say p colon has and then inside of parentheses, a. So what that's saying is we're going to style this p tag if it has an anchor tag, and that will find all paragraph tags that have an anchor tag as a child, Which, which is is at the very most basics saying, this is going to be again, we're styling the parent based on the contents of the the parent. Right? The the child is the anchor tag. The parent is the p, so we're styling the parent.

Now what this you might not think about this, but, This is not just useful for that small small use case because this thing ends up being a little bit more useful than you may expect at first glance. It. And even even at that, even if it was just we can style the parent based on the child, that's something that everyone has been asking for for a long it. Time and it's going to forever change how we write CSS. But you can dive in further and say, like, let's say we wanted to style it. The button within a paragraph, but only if the paragraph has an anchor tag in the paragraph.

You can do that by saying, it's easy enough. You just say p has a and then space button because that first thing the p has a is the selector, and it's selecting the parent. Right? So it's selecting that paragraph if it has a butt or if it has an anchor. It. Then you can then go into that paragraph just like you would any other selector and then grab that button and style it. It. So that that that already is kind of mind blowing when we get there. But then you can even you can use this with other pseudo classes to say, like, Let's find all of the paragraph tags that don't have an anchor tag on them. How much you do that? Well, we can say p colon not And then inside of parentheses, colon has parentheses a. That is going to find all of the paragraph tags that do not have an anchor tag as the child, which To me, that's pretty amazing. We're we're getting into some fun stuff here. In fact, this sounds complex, but we have the, the code examples in the show notes. You'll be able to see that that little snippet it. Is, I don't know, 10 characters long max. And and having that little snippet once you learn how to read this stuff really becomes pretty neat. It. You can also use with other, like, sibling selectors and stuff in here too. I have an example with a sibling selector where let's say you wanted to find All of the paragraph tags where the anchor tag is a direct sibling as in here here's a situation. Right? So if we have a paragraph and inside of that paragraph is an anchor tag, we want this selector to hit that. But if we have a paragraph with a it. Inside of it, and then inside of that span is an anchor tag, then this will not find that paragraph.

So to do that, you would say p colon has. And then inside of the parentheses, then you can then use the It's not the direct sibling selector, which is the greater than sign and then the anchor tag. So this stuff can all sound kind of abstract When we're talking about it on the, on the radio here. Right? We're on the radio. We're talking about it. Code stuff is never super great to talk about stuff like that, but I have, it. Examples along with some HTML, and I have some some CSS and some comments to express all of these things

Explicitly. So if you want to go ahead and check a visual representation of that, just check out the show notes. Yeah. Like, I have wanted that in the past Where sometimes I have, like, a blog post that doesn't have a title. So you want to, like, make the 1st paragraph a little bit larger so you can kind of lead into that. That's a really good use case. I just I've wanted this for so long to be able to select all the elements in there and Using it with not as well. So anything that doesn't have a video inside of it, you can style a different way. This is sort of a game changer because All of CSS up until then has just been based on the last item or even, like, using it down. Yeah. Like, you could use it with the star selector that are attributes. So, like, select me a paragraph where there is a link to syntax.fm inside of it. Right? Like what? Or if you wanted to put a little, Amazon link it between beside any paragraph, like you have a gutter on your blog. And any any paragraph that has an Amazon link inside of it, put a little Amazon logo in the side to note that it links off to Amazon. Right? That's that's a pretty simple example. You you would want that. Well, you could say, like, paragraph, colon, has a star equals ref Amazon, And that would say any paragraph that has a link that matches Amazon, and that could be Anywhere literally anywhere in the URL so you could gain that, but, total use case for it. Be pretty simple. I've done lots of this stuff, But I've had to do it in JavaScript because it was just not possible in CSS.

Yeah. This is honestly and and once you get the wheels turning a little bit, so, it. You know, ahead of the surface, you say parent selector. That sounds something that we we really want. But once you get the wheels turning and seeing some real practical examples about it. How this is gonna simplify some approaches that you may take the things. Like you said, I we we have blog posts. In some blog post with videos, it. And some of them don't. And with the videos ones, we kinda want that video to bleed up, and we want the the header to be a different size to accommodate for the video. And, like, little things like that that now we can actually take care of in a way that actually makes sense, like you mentioned, rather than throwing extra classes on via JavaScript or having to deal with those things. I mean, so many of these things are just reducing the amount of work we have to do outside of the browser itself. Here's another one.

You have nested navigation. So whether using Nav tag or UL, you want to put a little arrow next to the links That have a nav inside of them or have a nav as a sibling. Mhmm. You can say a dot has man, I see those. So many turn in west. Yeah. Yeah. There's so many so many use cases. This is one of those stick it in your back pocket because you're going to need it. Yeah. Stick it in your back pocket.

Now's the time where we douse water on this flame. We just take a big old bucket of ice water. This is ice bucket showing right here. But what's the browser support like Scott. Yep. The browser support like this is crappy.

It's not good. We're going to be what it's poopy. It's It's, it's Banana Head. Stupid is what this is. Banana Head. Yes.

It's Banana Head. What so the the browser support for this one, unfortunately, not good. We have Safari, believe it or not, is the only supported browser. And even then, I don't know what version of Safari that is. I should probably have that up. Either way, 15.4,

which was released March 13, like, a couple months ago. Safari

of all things has this. I'm running, Version 15.4 right now on my Safari technology preview, but I don't know what I'm running on my non technology preview. Let me see that. It's also under a flag

In Chrome 101, which was released about a month ago. So, if you turn on the experimental web platform features flag, which I would guess Both of us have turned on. You can also get it in Chrome, and then, like, no sign of Firefox at the moment. So I it's one of your users

will have it if you turn it on with the flag either, so don't let that that don't make you feel more confident about it. Oh, yeah.

Soon, though, it it says it's still in working draft, so maybe it's not even

done yet. Yeah. There's you know what? There's a, there's a I posted a a Chromium bug issue where they're implementing it right now. And and, like, the most recent thing is, like, people asking about Tests being written for certain aspects of it, so I think it's pretty far along. I don't need tests.

Just ship it.

Yeah. So I I suspect we will see this in the next year.

And you know what? Maybe maybe we can Start using it later this year. That would be really great. Who knows if we can or not, but this is one of those ones that I'll be waited with beta breath for because Has is going to change the way I write CSS.

Now a next one that we're gonna be talking about today is also it. Going to be changing the way I write CSS, and it's very closely related to the other one that we're gonna be talking today. And this is is and where. Now we're gonna start with where.

It. They're very similar.

In fact, the difference between them is kind of more confusing than what exactly the selector even is. So with where it accepts an array of selectors and this array is basically going to be the, ability to say any one of these selectors will work. Right? And so the best way to understand this is in the past, we've written things like, Alright. I have a if I wanna say a paragraph tag within a header, a paragraph tag within the footer, and a paragraph tag within the main, I would say header p, comma, main p, comma, footer p. Right? You're having to essentially repeat that paragraph it. Every single time as the child, despite the fact that that p is staying the same every single time even though it's just the parent, essentially, that's changing here. So what this does is it's basically a shorthand for that common syntax that we've always written for a long time. So where In my mind, it's not getting you a ton of, quote, unquote, new functionality.

It well, it isn't. It it's getting you a little bit of new functionality. We'll talk about it, but it's giving you a ton of new functionality.

What it's mostly doing is acting as a shortcut for having to repeat yourself over and over again, having that same kind of a wet code that we would have to write where you would see essentially the same selector with a a just a different modification to somewhere up higher up in the chain of this thing. So now you can say colon where header comma main comma footer and then p instead of header p comma main p comma footer p Come on. People are not following this.

Well, they will follow it if they go to the show notes or they will go to podcast players, swipe up, and look at the show notes. I'm reading directly from the show notes here, Wes. And so. Okay.

So that's where we're. Hold on. Hold on. Hold on. I have an example.

You know, where I find this really handy is in 2 spots. If you want to See, if you want to select all headings within, literally are global or within a div. So So you could say, like, dotpostcolon where h one h two h two h four h five h six. Or if you want to select all of the inputs, inside of a form element because you got it. Like, what are the inputs? You have to you got input, you got text area, and you have select.

If you want to select all 3 of those, then you have to generally have to do like .formselectcomma.form.

Right? Yeah. Right over. And like, this is not a problem for most people that are using Sass or anything that's compiled, but regular old CSS doesn't have that. There's no nesting selector, so this is a huge benefit, to that use case.

It's a it's a simplifier is really what this is. It's gonna simplify your code, and, honestly, it's gonna make it easier to read. Now there what is one little bit of added new functionality that I found to be kinda fascinating here.

So the added new bit of functionality is that, typically, if you're using an unsupported CSS feature in any of your selector, So at any point in your selector when you're using commas, if there is an unsupported feature that cannot be parsed in CSS, CSS will ignore or the browser will ignore that entire thing, that entire block. So if you have a complex selector And somewhere in there is a is an unsupported feature. It decides, well, we're not we're not just going to ignore the unsupported feature selector. We're gonna ignore every other selector you have in there as well. It. So that that line will then make you duplicate, see, some CSS if you're using unsupported selectors, where with where, it. You can use an unsupported selector in the list of selectors, and it will still work for all of the ones that are supported.

So, therefore, it gives you a little bit more of that progressive enhancement stuff without having to write additional lines of code, without having to duplicate a line of CSS. It. I can't say this is something that I've been begging for, but it's honestly interesting to know that it it exists. Pretty cool. Let's talk about can you use it? Yes. You can use it. It's supported just about everywhere, so you can use it everywhere.

Now, last 1 here is we're not gonna spend too much time on this because this is is, And is is basically let me let me read you what is is. Is selects any element that can be selected by 1 of the selectors in a list, And it is it is given to you with colon is and then a list of selectors.

That sounds exactly like where. In fact, that's word for word the exact same thing.

That's the exact same thing. So why do we have is and where? What's the difference? Well, it all comes down to specificity, which is actually really tough. Longtime listeners of the show will know that specificity is not a word that we have been able to say at points in the show. And, just to goof Wes up, I I I I Intentionally misspelled it several different ways in the show notes even though I happen to be the one reading the show notes.

So am I.

I I wrote it spec a spec of thick thickity spec space of Yep. Yeah. Specificity. There we go. Did I say it right? Specificity? No, you didn't. And I know you're doing. God. No, I actually didn't.

Spec specificity.

I can't do it.

How do you say it? Specific specificity.

No. I I don't trust you anymore with this. I believe you. I literally can't. K. Let me look at the word. Specificity.

A specificity.

Specific specificity.

You just have to remember city. That's all I remember. Specificity. I don't I don't think about the entire beginning of the word. I just think about if I dig to the city part, then I'm in the clear. Specificity.

Yeah. That's the end. All right. Specificity.

I can't do it anyways.

Is is the same thing as where, but The selectors inside of is will count towards the specificity of the selector. Is that true? It's the entire is statement contour counts towards the specificity,

where with where it it has a where has a specificity of 0.

So when you use where, It does not affect the specificity at all, but when you use is, it does. It calculates the specificity.

So if you have, like, a monster selector like HTML space body space div space dot app a space to whatever. And then and then colon is all of that nested selector. Like, you just juice that selector up to almost never be able to override it. That's just a little bit. Yeah. Just it. Yeah. So I did a tweet the other day where I showed A tip about using is and a couple of people are like, where is better because of the specificity.

And so I would like, I'm gonna go out and say you probably almost always want where. Is that true? It seems like to me, unless you want that that to to be really locked down. It. In fact, the the dev docs on the Mozilla dev docs actually had a good example. So instead of, making you all suffer through me trying to read out HTML and CSS Vladimir, I've I've linked to the Mozilla docs where it has the, explicit example as to what, how that specificity actually comes into play here it. And how it actually works with real HTML and CSS and in what overrides what kind of deal. But in reality, I I kind of Agree with you. I'm almost always going to use where myself because I kind of on the side of less specificity.

Myself, I I I tend to to on the side of less specific. But yeah. Yeah, absolutely. You don't want to be having to cram in extra selectors

or even for an important just to overwrite it. So that's good. I have to go back and update that tweet because yeah. I think we had is first or something. I'm not sure why I had been using is For my entire career, I had never run into a specific issue, but you don't wanna that's a bad day. So use where by default, I think, is a safe thing to say. Yeah. Totally. It. So, can you use it? Yeah. You can use it. It's part of the same everywhere where is. Everywhere

you can find where you can find is.

Unfortunately, we cannot find has in those places as well just yet. But these are some interesting new CSS selectors.

They are What what do we what do we define them as? They're, pseudo classes.

Pseudo classes. That's what they are. And So we chains is not one. New pseudo classes to juice up your CSS.

I, I we're doing this thing. I was like, Hey, Scott, should we talk about contains as well? And then he's like, Yeah. And then I came back a minute later. I'm like, contains is not a thing. I made that up.

Yeah. And there was a You didn't know you made a dot v there. Day.

Yeah. Yeah. There's so many new things in CSS. It's like, does that sound like it could exist? Sure. That sounds like it could exist. I'll I'll take a look at it.

Alright. I think that's it for today. Thanks for tuning in, And we will catch you on Wednesday. Peace.

Peace. Head it. Over to syntax.fm for a full archive of all of our shows.

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