Up next in 10
Learn Every CSS Selector In 20 Minutes
4K views
Feb 7, 2024
Unlock the full potential of CSS with this time-efficient tutorial, "Learn Every CSS Selector in 20 Minutes." In this video, you'll embark on a comprehensive journey through the world of CSS selectors, gaining mastery over the tools that dictate styling rules on the web. The tutorial covers a wide range of selectors, from basic element selectors to more advanced attribute and pseudo-class selectors, offering a condensed yet thorough guide suitable for developers of all levels. Whether you're a beginner seeking a rapid introduction to CSS selectors or a seasoned developer looking to reinforce your selector knowledge, this guide provides a clear and concise walkthrough. Join this tutorial to streamline your understanding of CSS selectors in just 20 minutes, and empower yourself to create more precise and effective styles for your web projects.
View Video Transcript
0:00
The hardest part about CSS is first figuring out all of the selectors and properties that are
0:05
available for you to use, and then secondly, memorizing those selectors and properties so you
0:10
can use them in the correct situations. So in this video, I'm going to teach you all of the selectors in CSS you need to know
0:17
and then you can download my free selector cheat sheet in the description below, which has
0:22
all of the selectors I'm going to teach you readily available with examples so you can look
0:26
them up and never have to worry about memorizing them or forgetting them in the future
0:31
So let's get started now. Welcome back to WebDev simplified. My name's Kyle, and my job is to simplify the web for you so you can start building
0:42
your dream project sooner. So if that sounds interesting, make sure you subscribe to the channel for more videos just
0:48
like this. Now to get started, I have a really simple HTML page
0:52
We got a div, a span, a UL with some LIs inside of it
0:56
And from here, I'm going to show you all of the CSS selectors you need to know in order
1:01
to properly style all of these different elements. And to get started, I want to go over the most basic types of CSS selectors, which we're
1:08
going to see everywhere. And the very first CSS selector I want to talk about is going to be the universal selector
1:14
This is the asterisk symbol, this star here, and what this says is to select literally everything
1:20
So if I say, whoops, background is going to be red, this is going to change the
1:26
the background of every single element. Our body, our div, our span, our U-all, our L-I, every single
1:32
element is going to have a background color of red, because this star asterisk symbol is selecting
1:37
every single element on our page. If we want to only select certain elements, though, we can
1:42
use the type selector, which is going to be for selecting element types, so we could say, for example
1:47
div, we just type out the element, and now our divs are red. We could say L-I, and now all of our
1:52
L-Is are going to be red, or span, and now our spans are going to be red. So we can
1:56
select individual elements based on the actual type that the element has, based on that tag
2:01
that we specify in the HTML. Now the next type that we can use is a class selector
2:07
So a class selector works by you put a period, and then you type in whatever you want
2:11
and that's going to be your class name. So we could say, for example, red is going to be our class name
2:17
And if we save, you'll notice nothing is red, and that's because you need to apply classes
2:21
to your HTML. So I can come down here and say that our class is going to be equal to red, and now our div
2:26
is red. Let's say I want this item to be red. I can give it a class as red as well, and now that
2:31
item is red also. So any element that we give the class of red to is going to have this style
2:37
here because we give it this dot red selector. So anytime you want to select a class, it has to
2:42
start with dot, and then the class name. Another type of selector is going to be the ID selector
2:48
It's very similar to the class selector, but you start with the pound sign, and then you type
2:52
in the ID that you want it to be. So let's say, for example, blue. It's going to be our D, and we'll
2:56
change this color to blue here. Let's give this span an ID of blue. So we just say ID equals blue
3:03
And now we save and you can see our span has that blue background color. But one important
3:07
thing to note is that if you use ID selectors, you can only have one ID on a page. So an ID
3:13
selector is generally something you don't want to use because you're going to only have one
3:17
on a page. It's very specific and it's generally not too useful. Also, when you're using a selector
3:23
like div, for example. This is also not very useful because I don't probably want to style all of
3:28
my divs exactly the same. I probably want to style some divs differently, some not the same
3:32
so you're generally not going to use the element selector. Most commonly, out of these selectors
3:37
you're going to use that class selector where you're saying red, for example. This is because
3:41
you can share this across whatever elements you want by just giving them a class. You can share
3:46
it between multiple elements. You can have it on just one. You could have it on 10. You could have it on none. It's really flexible. And that's why generally you're going to use classes over
3:53
IDs and elements. Now this is the most basic types of selectors, but what happens if you want to combine together
3:59
different selectors? Well, that's actually really easy to do. What if I want to select only divs that have the class of red
4:06
Well, all you need to do is put these selectors together without any spaces between them
4:10
So I could just say div. .red, and I save, and now you can see only divs that also have the class of red are going
4:17
to have this background color of red. Because if I add another div with some random text in it, you can see that this is also a
4:23
but it doesn't have the red background because it doesn't also have the class of red
4:27
So that's something really important to know. If you want to combine together selectors, you just keep adding them together without any spaces
4:34
For example, I could say divs that have the class of red and the class of green text
4:39
and if I give this a class of green text, and I give it a color here of green
4:47
you can see that now only divs that have the class red and the class green text have these styles of If I remove the green text class it no longer matches all of these selectors so it no longer going to have those styles applied
5:01
Now what happens, though, if I wanted to do like an OR type of scenario? Let's say, let's just remove all this, I wanted to select all of my spans
5:09
and I wanted to give them a certain style, and I wanted to select all of my LIs and also give them the same style
5:16
Well, all you need to do is put a comma between your different selectors, And now it's going to select both of these things
5:21
We could say our background is going to be red, and now you can see our span has a background
5:26
color of red, and every single one of our lies also has a background color of red, and that's
5:32
because we put the comma between them. And we could even go a step further and go that any span now is red, and any LI with the class
5:39
of red is also red, and we save, and you'll see only this first one, which has the class of
5:44
red is red, and our span is red as well. So we're able to combine together all of these different selectors
5:49
whether it's with commas or by just concatenating them together in order to do and operations as well as or operations
5:56
So that right there, just those few little selectors, is probably about 40% of all the CSS selectors you're going to write
6:03
because generally you're just going to be selecting things based on classes, combining together classes, or using the comma to say this class or that class
6:11
But what if you need to do something a little bit more nuanced? What if you want to select elements inside of other elements
6:17
Well, there's actually a really easy way to do that. Let's say that we want to get all of the L-I's inside of a UL
6:22
We could say UL, space, LI, and save, and now you can see all of our L-Is are having this background color
6:29
So a space essentially says that anything inside of an element that comes before it
6:34
So any L-I inside of a UL is going to have this red style here
6:39
And let's just change our mock-up here a little bit. We have a div, and let's say inside of that div, we're going to have a span
6:46
and then inside of that span we're going to have B, and we're just going to say nested text, just like that
6:53
And now let's say that we want to select any B tag that's inside of a div
6:58
Well, we could just say div and B, and now you can see this has a background color of red
7:02
because this space selector essentially says anything inside of a div, whether it's the direct child, a child of a child of a child, a child of a child
7:12
it doesn't matter as long as it's inside of a div. That's all that matters, and that it's also matching the selector of the B-T-T-T-T-E
7:18
And again, you can use any selector here instead of B. I could say dot red, for example, and now any dot red class inside of a div is going to have
7:27
this background color of red. You can use any different combinations of selectors you want
7:31
I'm just generally going to be used element selectors because it's easier to get the point across
7:36
Now another type of child selector that you can think of is the direct child selector, and
7:41
this one is using the greater than symbol here. And then if we put B for example on save, you're going to notice our B tag no longer has that
7:48
red color. And the reason for that is because this B tag is not a direct child of our div
7:54
This says it has to be the direct child. And our direct child is actually this span here. So the
7:59
B is not our direct child. Our span is the direct child of our div. We change this to be span than
8:04
B. You can see the B tag is the direct child of our span. So this will properly give it this red
8:10
background color. So this greater than symbol is always going to be direct child. While if it's just
8:15
a single space, it can be any level of child that does not have to be the direct child
8:20
Now the last two selectors that I want to talk about in this section are going to be based
8:24
on sibling selectors, so it's essentially getting a sibling of an element
8:29
And the way you define a sibling is inside of this HTML
8:32
We have our body, and each one of these elements are div, our span, this div, and this
8:37
UL are all siblings in the body. And then these LIs are all siblings in themselves, because they're all inside the same element
8:44
at the same level of nesting. That's how you define a sibling. So let's say that we wanted to select every single, let's say, L.I that comes after an LI
8:54
with the class of red. So we can say L.I. dot red. And then if we put a till day symbol, this is saying, give me every single L.I that comes after
9:03
an L.I with the class of red. And if we save, you can see all three of these LIs come after this LI with the class of red
9:10
And if we actually move this class red down to item two and save, you'll notice that
9:14
even though item 1 is a sibling of item 2, it doesn't actually get selected by this selector
9:20
because it only selects elements after. So we found the L.I. with the class red
9:25
It's right here. Now we're only getting the siblings that come after, which are items 3 and 4
9:30
But what if you only want to get one sibling? You don't want to get every sibling. You only want to get the direct sibling
9:36
What you can use instead here is the plus symbol. And now if we save you notice that this will only get the very next child that is going to be having that LI here And that because unlike the general sibling selector which is the TILDA that selects all siblings that are afterwards the plus is only going
9:54
to match the very next element that comes after it. So we're only getting the L.I. That comes
9:59
directly after this L.I. with the class of red. And if we were for some reason to say that
10:04
this has a class of green, and we wanted to get LIs that have the class of green, and we say
10:10
If you'll notice nothing is actually styled, and that's because this plus symbol only checks
10:16
the element directly after, which is item 3, which does not have a class of green, so it does
10:20
not actually match this selector. Now with these different types of descendant and sibling selectors, that's probably another
10:26
20% of all the CSS you're going to write. And next, I want to talk about pseudo-classes, which are probably again another 20% of all your
10:35
CSS styles because they're really important with CSS. And pseudo-classes are essentially ways to style elements based on how a user interacts with
10:43
the page. So let's for example say that we want to select every single LI that a user hovers over
10:50
What we do is we put this colon and then type in hover. Every single pseudoclass is going to have a colon followed by the actual thing that we want
10:58
to check for in our case hover. So now if we save and we hover item 1, 2, 3, or 4, every single one is going to have that
11:05
red background as soon as we hover over it. type of pseudo selector is the focus pseudo selector. So let's get an input element inside
11:13
of here. Let's just say we're going to have an input. And if as soon as we click inside
11:18
of this input, we're essentially giving focus to this input. We're focusing on this element
11:23
by clicking on it. So now it has that background color of red. And when we click outside of it
11:28
you can see it no longer has that background color. So this is based on where the user's focus
11:32
currently is on the page. This works with things like buttons and form inputs, which is where
11:37
you're mostly going to see this. Speaking of input selectors, we can come in here, and let's just change this to the required selector
11:44
This is only going to select inputs that have the required attribute. So if we come in here and say required, now you can see our text has a red background color
11:52
while if we do not have required, it just has a normal white background color
11:56
Also, we can check boxes by saying checked. So if we were to come in here and say that this is a checkbox instead
12:02
whenever we check this checkbox, the background color should be red, but since you can't really modify the background color of a checkbox
12:08
I'm going to come in here and change the margin to be 50 pixels when it's checked
12:12
So if we click this, you'll see it has a bunch of margin around it when it's checked, and when we unchecked, you can see all of that margin disappears
12:19
And again, just like with checked, we can check for disabled, and now if we save, you'll see nothing happens
12:25
but if we change this to be disabled and save, you now see we get that margin around it
12:29
because it has that disabled status applied to it. Now those are the most useful selectors when it comes to interactivity with the
12:35
page whether it's disabled, hovered, focused, all that fun stuff. But there's also another whole class of pseudo classes, which have to do with where elements
12:43
are positioned on the page, whether it's the first child, the second child, the last child
12:48
So let's look at those a little bit by selecting our liys. We can say ally, first child
12:53
And we want to come in here and just say background is going to be red
12:57
And if we save, you can see the first ally child has a background color of red
13:01
And the reason that this is working is it's the first child inside of the parent. In our case, our parent is the UL, and this LI is the first child
13:09
Let's just come in here and say, what if we want to select the first LI with the class of red
13:13
Well, now you'll notice this no longer works, because first child only selects the very
13:18
first child, which is item 1. It doesn't select the first child that matches this selector, it just selects the very
13:24
first child. We can do a similar thing to first child, where if we just get rid of this red here
13:29
you can see we have the first child selected. We can come in here and say last child, that's going to select the last child for us
13:34
And then if we want to select some combination in between, we can say nth child, and in here
13:38
you just pass the number, for example, 3. Or you can pass a number like a formula that has n in it, so we can say 2N
13:44
This is going to select every other element. You can do 3N, and it's going to select every third element
13:50
We could say, you know, 1, or not 1, 2n, minus 1
13:54
That's going to select every other element, but it's going to offset by negative 1, so it's going to start with 1 instead of 2, and so on
14:00
So you can write in any formula you want. You can also do the same with last
14:04
And last child, and it does the same thing, but it starts from the bottom and goes up
14:10
And then lastly, there is something called only child, which just is like this
14:15
and it's going to select if it's the only child. So we can say that we want to select any span that is the only child
14:22
and you can see that this span here is the only child inside of this div
14:25
so that's why it has the background color of red, while this span is next to a bunch of other children
14:30
so it does not have that red background color. And very similar to the child, we have something called type
14:36
So we could say here first of type and now you can see that the first element of this type span that you find inside of our selector
14:49
So our very first span element here and our first span element in this container both have a background color of red
14:55
We could also do last of type. And if we change this to L.I., for example, you'll see the last of an L.I. in our list is going to have that selector
15:04
If we came in here and added, for example, something else like a span inside of here
15:07
and saved, you can see that this LI here at the bottom still has the correct styling applied to it
15:13
even though it's not the last element, it is the last of the type LI, which is what this of type
15:19
stuff is doing. We also have nth of type, same exact thing we could say two, or you can say
15:24
nth last of type. It's all going to work exactly the same, and then finally you have only of type
15:32
Like this, get rid of the two here, this is going to return if is the only of that type
15:36
So if we did span again, you can see that these are the only spans in their containers
15:41
Now the very last pseudo class I want to talk about is the not pseudo class
15:45
and this in my opinion is the most powerful because you can pass it any other selector you want inside of here
15:50
and it's going to essentially say I want to select any element that does not match the selector you pass to it
15:56
So let's say we want to get any LI that does not have the class of green. Now you can see we get item 1, 2, and 3, but since item 4 has a class of green
16:04
it is not being selected by this selector because, of this not pseudo class
16:09
Now we've covered pretty much all the pseudo classes that you're going to need to know, and
16:12
we can move on to pseudo elements, which are much simpler because there's only really two
16:16
that you need to know about. Let's come in here and say that we're going to select our div here with the class of red, and
16:23
we want to get the before pseudo element. So it's going to be two colons followed by the pseudo element, which in our case is before
16:29
And if you're confused about pseudo elements, I have a whole video on them in the cards and description
16:34
I'll link for you. But in here, let's just put a content, which is just a content. just going to say before and then we'll do a background of red and as you can see the text before
16:45
is being impended before our div with the background of red and the other pseudo class here pseudo element
16:49
I'm sorry is after so let's just change our text after and you can see that shows up after our
16:54
div fairly self-explanatory and again if you want to check these out I have a full video on them where
16:59
you can really learn all about the use cases and how you can use pseudo elements now the last set of
17:04
selectors I want to talk about in this whole video are attribute selectors and these
17:08
probably cover about the other 5% or so of your CSS selectors
17:12
They're much less common but they're pretty powerful and have some really great use cases
17:16
So let's say I come down here on this div and instead of having a class of red, I give it a class of
17:21
you know, data red. This is a data attribute custom one that we applied to our div
17:26
Now in order to select elements based on data attributes you put them inside of brackets and
17:30
then we just type in our attribute. has a background of red
17:35
And now you can see this div has a background red because it matches this data attribute
17:39
of red. That's pretty self-explanatory. It's a lot like your class selector except for here you just wrap it in brackets
17:46
What if you want to check for a particular value? Let's say we want to say data red is true
17:51
What if we want to check for that particular value? You just say equals and then inside of quotes you put your value
17:56
In our case, oops, true. Now if we save, you can see this is still red because it matches that value
18:02
If we change this to something else like False, you can see that it is no longer matching this
18:07
selector up here. But if we were to remove this equals section, it'll still match because it's just saying
18:12
any class or any element that has that data attribute, it doesn't matter what the value
18:16
is, I want to select it. Now if we come over here, let's just change this to one, two, three, and there's a few other
18:21
ways that we can compare for values of our data attribute as opposed to just equals, because equals
18:26
is saying exact match. What if we want to do a partial match
18:30
For example, if we wanted to say I want the beginning of this to start with a 1-2, and you
18:35
can see our color is red. That's because the beginning of data at red begins with 1-2
18:40
That's what this carrot symbol equals does. If we were to change this to 2-1-2, you can see it no longer matches anymore
18:47
We can do something similar with the dollar sign, that's the end of it, and if we say we
18:51
want it to end in 2-3, you can see it is now red because it ends in 2-3, but if I would
18:55
have put another 3 in here, it no longer ends in 2-3, so it does not match this
19:00
But if we want to match a data attribute that has the value 2-3 anywhere inside of it
19:05
for example in the middle here, we could change this. Instead of having the dollar signed, we could use this star here
19:11
And now if we save, it says anything that has a 2-3 inside of it, like it does here, it'll work
19:16
But if we change this to 4, you can see 2-3 no longer shows up inside of here, so it's no longer
19:20
matched by this selector. And those are all the CSS selectors you need to know
19:25
Make sure to download the cheat sheet in the description below so you can reference it and keep all these selectors in your mind and also if you enjoyed this video make sure
19:33
subscribe for more videos just like this thank you very much for watching and have a good day
#Computers & Electronics