Monday Monday open wide dev fans get ready to stuff your face with JavaScript CSS No module barbecue tip workflows break dancing soft skill web development the hasty Yes, the crazy is the tasty web development treats coming in hot here is where Sarah Kuda boss and Scott ill tomorrow Look, oh Welcome to syntax on this Monday hasty treat We're gonna be talking about some new 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 My name is Scott Toulinsky I'm a developer from Denver Colorado and with me today as always is Wes boss 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 has selector are the people who have not heard about what it can do So before we get into has let's get into two of our amazing sponsors today. That is magic Bell and log rocket Yeah, magic Bell.
It's a notification inbox for your product for your app for whatever you call it If you add magic Bell to your product you can get announcements billing workflow other notifications That's kind of 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 put push into that array when the person needs to see it But they know 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 sent 10 or notifications in a minute Then should they get 10 emails all at once who gets complicated really quickly? That's why you need something like magic Bell at magic Bell calm. They have smart notifications.
They have a really good SDK which you can integrate into all of your applications check it out at magic Bell calm the free plan gives you up to a hundred monthly active users Use the coupon code syntax FM is gonna get you 10% off the first 12 months Thanks you magic well for sponsoring sick this episode is also sponsored by log rocket at log rocket dot com forward So I'm glad rocket is the perfect place to truly see how your website is functioning And I don't mean see as in just like kind of see I mean see how your website is functioning in a scrubble 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 air log console log network requests 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 broke didn't work this emission 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 website doesn't work And then having an air pop up or even worse no air pop up And then you can see that happen and you cry and fix the bug and solve it eventually So check it out at log rocket dot com forward slash syntax It is a really really cool modern solution to a problem that we've all been dealing with for a long time All right, let's all talk about another problem that we've been dealing with for a long time Can I 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 Triggered because we're 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 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 is like I'm like, why are we calling something a dumpster like someone's a dumpster They're not a dumpster. What do you what? My kids were calling everyone poopy head for the longest time and they would meet people in public Hey, poopy head.
So now we have to say we call people banana head. So let's go ahead is where we're at Yep, okay banana head that's pretty good banana head is way better than poopy head. Yeah, my daughter is at the age where she'll like she'll Say something like what we'll do the game like what raise your hand 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 quickly darting on what what are they gonna do if I say poo poo here? 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 the in WordPress I want to style this blog posts differently if it has a video or 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 the differently and we've had to do either server side stuff or JavaScript checks and throw a Class on there and so 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 these styles should be applied to and finally we kind of have that It's not a star. It's a colon has and we'll 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 CSS You're new or to the stuff in general you hear the word selector and you might not know exactly what we're talking about CSS when we say the word selector we're basically saying that it's any Path 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, 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 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 would it is a pseudo element?
What does it say a pseudo the has is a pseudo class? That's what it's called a pseudo selector. No, it's a pseudo class here, right? I was called a 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 then we'll find all paragraph tags that have an anchor tag as a child Which which is the very most basic saying this is going to be again We're styling the parent based on the contents of the parent right the child is the anchor tag the parent is the piece 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 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 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 the button within a paragraph But only if the paragraph has an anchor tag in the paragraph You can do that by saying is easily 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 selecting that paragraph if it has a but or if it has an anchor then you can then go into that paragraph Just like you would in the other selector and then grab that button in style it So 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 in them how much do 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 getting into some fun stuff here in fact this sounds complex But we have the code examples in the show notes You'll be able to see that that little snippet is I don't know Ten characters long max and having that little snippet once you learn how to read this stuff really becomes pretty neat 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 as an anchor tag We want this selector to hit that but if we have a paragraph with a span 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 the It's not at 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 around the radio. We're talking about it code stuff is never super great to talk about stuff like that But I have examples along with some HTML and I have some some CSS and some comments to express all of these things It's 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 first paragraph a little bit larger so you can kind of lead into that That's a really good use case I just I 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 it's 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 Like you could use it with the star selector that are at your view 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 between beside any paragraph like you have a gutter on your blog in 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 a pretty simple example.
You would want that well, you could say like paragraph colon has a Star equals ref Amazon and that will say any paragraph that has a link that matches Amazon And that could be anywhere literally anywhere that you're else 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 once you get the wheels turning a little bit So, you know, I had a surface you say parents left or that sounds something that we really want But once you get the wheels turning and seeing some real practical examples about how this is going to simplify some approaches that you may take The things like you say we have blog posts in some blog posts with videos and some of them Don't and the videos ones We kind of want that video to bleed up and we want the header to be a different size to accommodate for the video and Little things like 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 you're using an app tag or UL You want to put a little arrow next to the links that have an app inside of them or have a nav as a sibling You can say a dot has man. I see those 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 gonna need it Yeah, stick it in your back pocket.
That's the time where we douse water on this way and we go to the ice water This is everything we don't have but what's the browser support like Scott? Yeah, the browser support like this is crappy Um, it's not good. We're going to be with it. It's poopy.
It's it's um, it's been an ahead banana head. Yes, it's been an ahead What you so 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 them up either way 15.4, which was released March 13 Yeah, so 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 none of your users Will have it if you turn it on with a flag either.
So don't let that make you feel more confident about it Soon, no, 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 um, there's I posted a chromium bug issue Where they're implementing it right now 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 long. I don't need to ship it Yeah, so 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 this going to change the way I Right CSS now and next one that we're gonna be talking about today is also 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 isn't where now We're gonna start with where 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 all right I have a if I want to 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 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 is not getting you a ton of quote unquote new functionality Well, it is and it's getting you a little bit of new functionality We'll talk about it But it's not 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 wet code That we would have to write where you would see essentially the same selector with 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 I'm not following this well They will follow it if they go to the show notes or they are podcast players wipe up and look at the show notes I'm reading directly from the show notes here West and so okay, you know where we hold on all that I have an example You know where I find this really handy is in two spots if you wear If you want to select all headings within Literally or global or a within a div so you could say like dot post colon where H 22 H for five H six or if you want to select All the inputs inside of a form element because you got it What are the inputs you got input you got text area and you have select If you want to select all three of those then you have to generally have to do like dot form select comma dot form Right. Yeah, right over and like this is not a problem for most people that are using SAS or anything That's compiled but regular old CSS doesn't have that and 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 out there What is one little bit of added new functionality that I found to be kind of 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 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 So that that line will then it will make you duplicate see some CSS if you're using unsupported selectors Where with where 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 I'm going to duplicate a line of CSS I can't say this is something that I've been begging for but it's honestly interesting to know that 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 No, last one here 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 one 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 that's word for word the exact same thing That's the exact same thing. So why do we have isn't where what's the difference? Well, it all comes down to specificity which is actually really so long time listeners the show will know that specificity is not a word that we have been able to Say a point in the show and just to goof west up I intentionally misspelled it several different ways in the show notes even though I happen to be the one reading the show notes I wrote it spec spec of the pickety spec Yeah, yeah There we go. Did I say right specificity?
No, you didn't and I know you're doing no I actually didn't spec specificity I can't do it. How do you say it specificity? No, I don't trust you anymore with this. I believe I can't let me look at the Fiss city specificity specificity specificity specificity Remember city that's all I remember city.
I don't think about the entire beginning of the word I just think about the city part that I'm in the clear specific Yeah, it'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 selectors that true It's the entire is statement counter it counts towards the specificity where with where it has a where has a specificity of zero Oh, 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 space whatever and then colon is All of that nested selector like you just juice that selector up to almost never be able to overwrite it That's just a little bit.
Yeah, so I did a tweet the other day where I showed a tip about using is and a couple people are like Where is better because of the specificity? And so I like I'm gonna go ahead and say you probably almost always want where is that true? It seems like to me unless you want that that to be really locked down in fact The 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 on there I've linked to the Mozilla Docs where it has the explicit example as to what How that specificity actually comes into play here and how it actually works with real HTML and CSS and in what overrides What kind of deal but in reality? I kind of agree with you I'm almost always going to use where myself because I kind of err on the side of less specificity Myself I tend to to err on the side of less specific, but yeah, yeah Absolutely You don't want to be having to cram in X selectors or even offer an important just to override it So that's good I'll 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 specific issue, but you don't want to that's a bad day So use where by default.
I think it's safe thing to say yeah, totally So can you use it? Yeah, you can use it sport of the same everywhere Whereas 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 do we what do we define them as they are? So Sudo classes that's what they and so we can't do pseudo classes to juice up your CSS I we're doing this thing I was like hey Scott should we talk about contains as well and then yeah, and then I came back a minute later my contains is not a thing I made that up Yeah, there's so many new things in CSS. It's like does that sound like you could exist sure that sounds like a good exist 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 And on over to syntax.fm for you 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