I can has() new CSS Selector?!

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.

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 then you can then use the

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

maybe it's not even

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.

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,

it. You can use an unsupported selector in the list of selectors,

CSS feature in any of your selector, based on the contents

where with where, 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.

work for all of the ones that are supported.

and it will still So before we get into HAZ,

So the added new bit of functionality is that, typically, if you're using an unsupported My name is Scott Tolinski. I'm a developer from Denver, Colorado. And with me today, as always, 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, Peace. Head it. Over to syntax.fm Now what this you might not think about this, but,

like, a couple months ago. Safari I That's kinda cool because if you think about how hard it is to and,

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 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.

which was released about a month ago. So,

I it's one of your users

crappy.

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, am.

Version 15.4

In Chrome 101, where h one h two h two h four h five h six. Or if you want to select all of the inputs,

and then, like, no sign inside of it. Right? Like what? Or to that use case.

of Firefox at the moment. So

which was released March 13, They have a really good,

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

this is a dumpster, 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, is basically going to be the,

My my my kids love to say that things are the dumpster

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.

Or the trash can. They'll be like,

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.

someone tells a dumpster. They're not a dumpster. What what 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.

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.

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, 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.

SDK which you can integrate into all of your applications.

mouse

monthly active users, inside of is

Let's get into 2 of our amazing sponsors today. That is Magic Bell and LogRocket.

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.

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].

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

Check it out at magicbell.com.

They have smart notifications.

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.

The free plan gives you up to a 100

But don't push it if they saw it in the app. And what if I send 10 notifications Yeah. Magic Bell. It's a notification 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,

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 of all things has this. I'm running,

You can do that by saying, it's easy enough. You just say p has a CSS will ignore or the browser will ignore that entire

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,

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, for a full archive of all of our shows.

then this will not find that paragraph.

have an anchor tag on them. How much you do that? Well, we can say p colon not And then inside of parentheses,

as in here here's a situation. Right?

the tastiest web development treats coming again hot. Here is Wes, Barracuda,

Boss, and Scott

the craziest,

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,

Monday. Monday. Monday.

then in WordPress. I want to style this blog post differently if it has a video

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, the same thing as where, but literally are global or within a div. So So you could say, like, dotpostcolon See, if you want to select

you have to generally have to do like a star equals ref

.formselectcomma.form.

it has an anchor tag, and that will find all paragraph tags that have an anchor tag as a child, Which, Yeah. And there was a You didn't know you made a dot v there. Day.

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

another selector.

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 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

of the the parent. Right? The the child is the anchor tag. The parent is the p, so we're styling the parent.

which is is at the very most basics saying, this is going to be

and 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

Spec specificity.

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

No, you didn't. And I know you're doing. God. No, I actually didn't.

Is is

The selectors 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

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.

specificity.

will count towards the specificity of the selector. Is that true? It's the entire is statement contour counts towards the specificity, Or if there is you want to put a little arrow next to the links

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?

Specific

I can't do it.

A specificity.

That's the exact same thing. So why do we have is and where? What's the difference? path

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.

HTML space body space I've wanted this for so long to be able to select differently. And we've had to do either server side stuff or JavaScript checks and throw a class on there. And

So if you have, like, a monster selector like

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

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, 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?

You know, where I find this really handy is in 2 spots. If you want to or even for an important just to overwrite it. So that's good. I have to go back and update that tweet because

If you want to select all 3 of those,

all headings within,

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.

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

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.

They are What what do we what do we define them as? They're, 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

Or drop a review if you like this show.

Unfortunately, we cannot find has in those places as well just yet. But 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.

pseudo classes.

Wednesday. Peace.

And don't forget to subscribe in your podcast player 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.

you can find where you can find is.

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

I,

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

So am I.

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 when you use where, It does not affect the specificity

at all, but when you use is, it does. It calculates the specificity.

of 0.

it. Examples along with some HTML, and I have some some CSS and some comments to express all of these things

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,

So to do that, you would say p colon has. And then inside of the parentheses, selectors.

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 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.

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 integrate notifications into your app, you might think, and that could be Anywhere literally anywhere in the URL so you could gain that, but, Amazon, Amazon

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

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 I

link it between

And that would say any div space dot app a space to whatever. And then and then colon is

if you wanted to put a little, Super simple. I'll just have an array of notifications and

total use case for it. Be pretty simple. I've done lots of this stuff, But I've had to do it in JavaScript Just ship it.

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

because it was just not possible in CSS.

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

put a little Amazon

beside any paragraph, like you have a gutter on your blog. And any any paragraph that has an Amazon link inside of it,

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,

everybody. I'm excited about this new has selector.

is Wes Boss. Hey,

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.

ability to say any one of these selectors That sounds exactly like where. In fact, that's word for word the exact same thing.

will work. Right? And so the best way to understand this is in the past, we've written things like, 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 but only if the paragraph has an anchor tag in the paragraph.

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

In my mind, it's not getting you a ton of, quote, unquote, new functionality.

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

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

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 can't do it anyways.

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

Just the whole world could get thrown on its head. Alright. Let's talk about Let's find all of the paragraph tags that don't heard about what it can do.

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 So at any point in your selector when you're using commas, where with where it it has a where has a specificity

Now, 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.

And it is it is given to you with colon is and then a list of selectors.

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,

within a paragraph,

This is not just useful for that small It. They're very similar.

it. The button

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 these are some interesting new CSS

That have a nav inside of them or have a nav as a sibling. Mhmm. You can say a dot has man,

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 explicit example as to what,

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.

In CSS, when we say the word selector, we're basically saying that it's any really cool modern solution to a problem that we've all been dealing with for a long time. It. Alright. Let's talk about CSD.

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.

LogRocket 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 and then space button because that first thing the p has a is the selector, and it's selecting the parent. Right?

at logrocket.comforward/syntax.

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.

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,

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/ Now a next one that we're gonna be talking about today is also

It is a really, if there is an unsupported feature that cannot be parsed in CSS, So the most basic bare bones example of this is saying, let's say you wanted to style a paragraph

syntax.

and then you put a star beside the actual element that this style should be applied to.

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

is p space and then the dot in the class. That's a selector. The selector is the thing that is selecting 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, Pseudo, done yet. Yeah. There's you know what? There's a, again, we're styling the parent 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