Up next in 10
This Is So Much More Than Just A Parent Selector
2K views
Feb 7, 2024
"This Is So Much More Than Just A Parent Selector" is an enlightening video that delves into the capabilities and potential applications of the CSS parent selector beyond its conventional use. The tutorial explores how the parent selector, often overshadowed by other CSS selectors, can be harnessed creatively to target specific elements based on their parentage. Viewers are introduced to advanced CSS techniques and concepts, including complex selectors, pseudo-classes, and combinators, which enable precise styling and manipulation of elements within their parent containers. Through practical examples and clear explanations, the video demonstrates the versatility of the parent selector in various scenarios, such as styling nested lists, forms, and navigation menus. Whether you're a novice or an experienced developer, this tutorial offers valuable insights into unlocking the full potential of CSS selectors to streamline styling and enhance the user experience on webpages.
View Video Transcript
0:00
If you want to master the CSS has selector, then you need to understand it is so much more than just a parent selector
0:07
In this video, I'm going to be talking about what this selector does, why it's so revolutionary for CSS
0:12
and then we're going to be covering a bunch of different real-world examples that were impossible to do before this selector
0:21
Welcome back to WebDev simplified. My name's Kyle, and my job is to simplify the web for you
0:25
so you can start building your dream project sooner. And to get started, I'm just going to explain what the Has Seplified
0:29
selector is in the most basic scenario. So here I have three different boxes on my screen
0:34
You can see they're all wrapped inside a div with the class of box. This first one has a paragraph with the class P1
0:40
The second one has a div that contains a paragraph with the class P2, and then this final one
0:44
just has a simple button. So if I wanted to style my boxes based on their content, let's say I wanted to style all the boxes
0:50
that had a P tag inside of them to make them red. So I could come in here, I could say dot box, and this is the thing I want to style, and I want
0:57
to check to see if it has something inside of it. So to do that, I would use the has selector and say, I want to get any box that has a P tag
1:04
anywhere inside of it. I'm going to change the background to red. Now, when I save, you can see that those two boxes have changed to this red color
1:11
Let's make it like coral, something a little bit less harsh on the eyes. So there we go, we have changed those to coral
1:16
But you can do more than just select elements that are inside of it. For example, I could say, you know, give me the box that has the class of P1
1:23
Or give me a paragraph that has the class P1 specifically. Another thing I can do is I can combine together different operations
1:29
For example, this selects all the paragraphs, but what if I only want to select the paragraphs that are direct children of my box
1:36
Well, I can do this fancy syntax here, and in VS code, this is going to look like it's an error, but this is actually going to work
1:41
What this code is saying is, okay, give me all the boxes that have a direct P child inside of them
1:46
And as you can see in our HTML, only one element has a direct descendant that is a P tag
1:51
This one right here is not a direct child of the box. It's inside of this other div that's wrapping it
1:55
Now, this code can be a little bit confusion to understand exactly what's going on
1:59
The way that I like to look at this code is I like to look at it and think, okay, we have a line here, dot box, and then get it our P tag, and then we have some code that goes inside of here
2:08
And what we're doing with the has operator is we're essentially saying, hey, I want to break up with this selector
2:12
And instead of selecting the P tag, which is what this would normally do, I want to select the box itself
2:17
So you just take all of the code that you don't want to be selected, but you still want to check for, and you put that inside of your has operator
2:23
So I would just put this inside of my has, and I would wrap it like this
2:27
and that is going to be how I use this code essentially. Now I did mention that you can do much more
2:32
than just selecting the parent like this, so I want to show you another example. And in this case, I want to select all of the boxes
2:38
that have a div inside of them. And if I do that, you can see only the select second box is selected
2:42
What if I actually want to select the paragraph instead of the actual box itself
2:47
Well, I could just add the P tag on the end of here. And what this code is saying, essentially saying
2:51
hey, select me a box, but I only want to get a box that specifically has a div inside of it
2:56
which in our case is this set. second box. Then what I want to do after I do that is now that I have my box, I want to get
3:02
all of the P tags inside that box and let just change the color here to coral Now you can see my text has changed to that coral color but only on the box that has a div If I remove this has selector you can see both of these boxes have that selection of our P tag here
3:16
and that's because they both have a P tag inside them. And in this case, I'm only allowing the one that has a div inside of it to work
3:22
So this has operators a really great way to build the narrow down different things based on what the children are
3:27
Now overall, this concept is fairly easy to understand conceptually, but I want to step it up a notch and show you some real-world examples of how exactly this works
3:34
So here's this very first example. I essentially have two different cards, as you can see by these different divs
3:40
And this card on the left here has this like special tag that you can see on it. And it makes it so it has this purple ribbon
3:46
It has like a purple outline, a purple box shadow, all that fancy stuff. And the way that I'm making this work is I have this special ribbon inside of my card
3:53
And then I'm just adding the class of special here to add the styles to my card. You can see if I remove that style of special, all the extra styles disappear and all I have is that ribbon
4:02
But when I add that class back, I get all the other really cool. cool effects, changing everything else to purple. Now this is kind of a pain when you're writing
4:08
CSS because now I need to have this div here as well as this class here in order to make this
4:13
work. But we can actually get around that problem with the has selector. So let me get rid of
4:17
that special class. I'm going to go into my CSS. I'm going to scroll to the bottom. This is the code right here that does all that really fancy code. And I know if I have a special ribbon
4:25
inside of my card, I want to make this card look special. So what I'm going to do is I'm just
4:30
going to use that has selector that we had talked about earlier. And if we have that special ribbon
4:34
Then I want to apply all those different special classes. So as you can see here, we have the purple color, the box, shadow the border, all that fancy stuff
4:41
But the key here is I didn't need to add an extra class to my card in order to say, hey, this is a special card
4:47
This is doubly really nice because if I accidentally add a class to a card that's not special, for example here
4:53
you can see it doesn't apply any weird styling, which is great
4:57
And the second reason this is really nice is it just makes my CSS a little cleaner. It's saying, hey, if this class here is inside of my card, I know
5:04
know this card is special. I don't want to have to remember to also add this special class here
5:08
as well. So it just makes it a little bit easier to write your CSS code. Now, another thing that
5:13
this can do, which is really cool, is you can actually have some type of interactivity on your page
5:17
that you normally would need JavaScript for. For example, I have a checkbox right here that
5:21
can toggle me between light and dark mode, but right now it's obviously not doing anything
5:25
I want to write some CSS that uses the has selector that will allow us to switch between light
5:29
and dark mode without any JavaScript at all. Now, in order to do this, let's go over to our styles
5:34
Well, actually first, let's just copy the class for our checkbox. Now we can go to our styles
5:38
And what I want to do is I want to select a body, my body element here, and I want to check if my body has inside of it this specific class, the dark mode toggle
5:46
So all I'm doing here is I'm checking, does my body have a checkbox to toggle between light and dark mode
5:52
If it does and this checkbox is checked, then I want to apply styles
5:56
So let's just say our background is going to be 333. So it's going to be a dark color
6:01
Now when I toggle my checkbox, you can see that my background, is changing between that light and dark mode every single time I toggle this
6:07
And the reason this is working is because I'm checking, okay, does my body have this specific
6:12
checkbox and is it checked? If it's checked, it means I'm in dark mode. And I can even go a step further For example I can say okay now I want to get my cards and I want to change the background of them to that 333 color So you don have to just apply things on the body You can apply things on anything So when I check this you can now see that these cards have a darker background on them which is exactly what I want
6:31
So this here is a really simple use case of how you can add some type of interactivity into your page with just simple CSS
6:37
And this is pretty easy code overall for CSS purposes. And it means you don't need JavaScript to do like a really simple dark and light mode
6:43
Now this next example is very similar to our dark mode toggle where it adds in some. some cool interactivity and touches on a really cool feature of the has selector
6:51
So here we have a really simple form. I have two inputs. This first one is a name input
6:55
It is required and the minimum length is three. I then have an email field which is also
7:00
required and over here when I enter information into my form you're going to notice that
7:04
the status of my checkboxes for my inputs are going to change dynamically as I enter
7:09
information that is valid or invalid. So when I don't have a name it's red, when I have less
7:13
than three characters is red, but once I go above three it's going to be green. Same thing with my email here
7:18
And I'm doing all of this with just CSS, no JavaScript at all. And the way that I'm able to make this work is with the has selector
7:25
So let's look at this code real quick to try to understand what is going on. First, what I'm doing is I'm checking my label here
7:30
So I'm saying, hey, does my label have a sibling that is an input? So this right here is really useful because in CSS, you can only ever select the next sibling
7:38
So this plus symbol selects the very next sibling, while this tillday symbol right here
7:42
allows you to select any sibling that comes after the current element. And in CSS, you've always been restricted to only going one direction
7:50
That means, normally if we wanted to do this, I would have to put my label after my input
7:54
in order to make this work with the sibling selectors as they are in CSS
7:58
Luckily, though, with the has selector, I can actually do sibling selectors that go both ways
8:03
So what this is saying is, okay, give me a label that has an input that comes directly after it
8:08
which is valid. And this is a CSS selector you can use to determine if the requirements you gave your input
8:13
are actually valid or invalid. So what I'm doing with this code right here is saying
8:17
hey, does a label have an input afterwards that's valid? If so, make it green. This one down here, same exact thing, but invalid makes it red
8:24
I'm also using the ability to actually chain things onto the end of this has selector
8:29
So this one is saying, give me a label that is valid. It has an input that's valid after it
8:33
And then give me the before element of that label, change the content to a checkmark, and add a little bit of space
8:38
Down here, same exact thing, but it adds an X instead of a checkmark. And that's how I'm able to get these really cool styles
8:43
by just doing this really simple CSS. And the real key takeaway from this one project right here
8:48
is that the ability of this has selector allows us to do sibling selectors
8:52
that go both directions, forward and backwards, which is something I've always wanted to do in CSS
8:57
and I never thought would be possible. Now, there are a few interesting caveats
9:00
you need to understand about this has selector, which I want to talk about now
9:05
To explain these caveats, I've gone back to the very first example, but I added a little bit of extra to our code
9:10
so I changed this class here to an ID of P2, and I added the class of red to our first box
9:15
Other than that, everything else is the same. So what I'm going to do is I'm going to come in here. I'm going to select my box
9:19
And what I want to do is I want to take my has operator and I want to check for a class of P1
9:23
or I want to check for an ID of P2. And I want to change the background to that coral color And if I save you can see both those change to coral And this already brings up one point of the has selector is if you put a comma inside of here what it going to do is allow you to check for either or So it either going to be P1 or it
9:41
going to be an idea of P2. And I can even go further. For example, I can say, oh, it also contains
9:45
a button, and now all three of these are going to be selected. So you can really chain together
9:49
a bunch of different or statements, which is really useful. Now, the problem with this, though
9:53
is the way specificity works. Let me come in here and I want to select my red box. And what I
9:57
want to do is I want to change the background. Let's just change it to green
10:01
I know the class is called red, but we'll change it to green so it doesn't clash with our coral color
10:05
And you notice our background actually doesn't change to green. You may think that it should change to green, because if we look at our selector here, we have a box that is a class, so we have one class selector
10:14
And then P1, that's also one class selector. So you'd think, okay, in the case of P1, we have two class selectors as our specificity
10:20
This also has two class selectors as our specificity, but it comes later, so it should be more specific
10:26
But that's not quite how this has selector works. The way the has selector works when you use a comma
10:32
it takes whatever the most specific selector in the entire group is
10:36
and it uses that. So in our case, an ID is more specific than a class. So the selector specificity of our has operator right here
10:42
is the most specific one, which is our ID. Now, this whole specificity conversation is confusing for you to understand
10:48
I have a full video on specificity. I'll link in the cards in description for you. But the main takeaway here is that the has operator
10:54
uses the specificity of the most specific element inside of it, and that is why this is not working as we would normally expect it to
11:01
If we get rid of this P2 here, you can see now the color changed to green because this is properly overriding it
11:06
Now, if we go back here, just a step, we can see here that we have the OR operator by using a comma, but what happens if we want to use an and operator
11:12
Well, to do that, we can just do two chains together has selectors
11:16
So I'm going to select something that has the P2 ID, as well as something that has a div inside of it
11:22
Now you can see that this one right here is changing to the selectors. that coral color because over here it has both a div and a paragraph with the idea of p2 inside of it
11:30
If I would have changed it to just like a paragraph tag, for example, and save, you'll notice that even though this div up here for our box has a paragraph inside of it, it is not change
11:38
to that coral color because it also doesn't have a div. So if you want to do ands, you just need
11:42
multiple has selectors all chained together. While if you want to do or, you just comma separate
11:47
them inside of it like that. Now the last thing I want to talk about is going to be the browser
11:51
support for this feature. And if we look here, you can see it's currently at 76%, which is not
11:55
super great, but you'll notice the only browser that really doesn't support it is Firefox. And
12:00
with this green flag right here, it essentially means that it's currently behind a flag, which
12:03
means hopefully it's going to be released fairly soon in Firefox. Even just a few weeks ago
12:08
this is only at about 50% support. So in just a few weeks, it's already gone up by 25%. And depending
12:13
on when you're watching this video, it may already be 100% across browsers for you to use
12:17
everywhere. The biggest thing holding it back right now is, again, Firefox doesn't quite
12:21
have support for it yet. And if we check here, older versions of Chrome don't have support
12:25
like at the beginning of August they didn't have support. Other than that, though, it's going
12:28
to be pretty well supported, especially as the months go on from when this video releases
12:33
And that's all there is to the has operator in CSS. If you want to keep up with these cutting
12:37
edge CSS features, I have a bunch of videos on them. I'll link them right over here for you
12:40
With that said, thank you very much for watching and have a good day
#Skins
# Themes & Wallpapers