470

June 13th, 2022 × #CSS#Web Development#Front End

I can has() new CSS Selector?!

Wes and Scott discuss new CSS selectors like has(), where() and is() that allow powerful new ways to select elements.

or
Topic 0 00:00

Transcript

Announcer

Monday. Monday. Monday.

Announcer

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes, Barracuda,

Wes Bos

Boss, and Scott

Scott Tolinski

CSD.

Topic 1 00:27

New CSS selectors: has, where and is

Scott Tolinski

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.

Wes Bos

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

Topic 2 01:03

Excited for has selector

Scott Tolinski

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.

Scott Tolinski

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

Topic 3 01:13

Sponsors: Magic Bell and LogRocket

Wes Bos

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.

Wes Bos

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.

Wes Bos

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 magicbell@magicbell.com.

Wes Bos

They have smart notifications.

Wes Bos

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

Wes Bos

Check it out at magicbell.com.

Wes Bos

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

Topic 4 02:33

Magic Bell for app notifications

Scott Tolinski

at logrocket.comforward/syntax.

Scott Tolinski

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.

Topic 5 02:39

LogRocket for debugging web apps

Scott Tolinski

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

Topic 6 03:40

Kids saying funny words

Wes Bos

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.

Wes Bos

I am.

Wes Bos

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.

Scott Tolinski

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.

Topic 7 04:49

Wanting parent selectors in CSS

Scott Tolinski

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

Wes Bos

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.

Topic 8 05:37

Use cases for parent selectors

Wes Bos

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

Topic 9 06:12

Has is a pseudo class

Scott Tolinski

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.

Scott Tolinski

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.

Topic 10 07:14

Has checks child elements

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 11 08:47

Complex has examples

Scott Tolinski

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.

Topic 12 10:30

More complex has examples

Scott Tolinski

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

Topic 13 11:02

Code examples available

Wes Bos

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.

Topic 14 12:45

More use cases for has()

Scott Tolinski

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.

Wes Bos

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.

Topic 15 13:28

Using has() for navigation

Scott Tolinski

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.

Topic 16 13:54

Has poor browser support currently

Scott Tolinski

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.

Scott Tolinski

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,

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Topic 17 15:12

Safari and Chrome support under flags

Scott Tolinski

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.

Wes Bos

Just ship it.

Scott Tolinski

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

Scott Tolinski

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.

Topic 18 15:55

Excited to use has() when supported

Scott Tolinski

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.

Topic 19 16:08

Introducing where selector

Scott Tolinski

It. They're very similar.

Scott Tolinski

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.

Topic 20 17:14

Where reduces repeated selectors

Scott Tolinski

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.

Scott Tolinski

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.

Topic 21 17:49

Where examples provided

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Topic 22 18:32

Where useful for input selectors

Wes Bos

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.

Topic 23 18:55

Where simplifies and improves readability

Scott Tolinski

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.

Topic 24 19:06

Where slight functionality increase

Scott Tolinski

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.

Topic 25 19:59

Where usage with browser support

Scott Tolinski

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.

Topic 26 20:20

Where well supported

Scott Tolinski

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.

Topic 27 20:38

Introducing is selector

Scott Tolinski

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

Scott Tolinski

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.

Topic 28 20:43

Is same as where syntactically

Wes Bos

So am I.

Topic 29 21:05

Hosts struggle to say specificity

Scott Tolinski

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.

Wes Bos

Spec specificity.

Wes Bos

I can't do it.

Wes Bos

How do you say it? Specific specificity.

Scott Tolinski

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.

Wes Bos

A specificity.

Wes Bos

Specific specificity.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

I can't do it anyways.

Wes Bos

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,

Scott Tolinski

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

Topic 30 22:06

Is counts towards specificity

Scott Tolinski

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

Topic 31 22:19

Where has no specificity

Wes Bos

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.

Topic 32 22:49

Prefer where for lower specificity

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Topic 33 24:08

Is has same browser support as where

Scott Tolinski

you can find where you can find is.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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

Share