Learn Every CSS Selector In 20 Minutes

the hardest part about CSS is first figuring out all of the selectors and properties that are available for you to use and then secondly memorizing those selectors and properties so you can use them in the correct situations so in this video I'm gonna teach you all of the selectors and CSS you need to know and then you can download my free selector cheat sheet in the description below which has all the selectors I'm going to teach you readily available with examples so you can look them up and never have to worry about memorizing them or forgiving them in the future so let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now to get started I have a really simple HTML page we got a div a span a ul with some allies inside of it and from here I'm gonna show you all the CSS selectors you need to know in order to properly style all of these different elements and to get started I want to go over the most basic types of CSS selectors what you're going to see everywhere and the very first CSS selector I want to talk about is going to be the universal selector this is the asterisk symbol this star here and what this says is to select a literally everything so if I say whoops background is going to be red this is going to change the background of every single element our body our div our span are you all RLI every single element is going to have a background color of red is this star asterisk symbol is selecting every single element on our page if we want to only select certain elements though we can use the type selector which is going to be for selecting element types so we could say for example div we just type out the element and now our divs are red we could say li and now all of our allies are going to be red or span and now our spans are going to be red so we can select individual elements based on the actual type that the element has based on that tag that we specify in the HTML now the next type that we can use is a class selector so a class selector works by you put a period and then you type in whatever you want and that's going to be your class name so we could say for example red is going to be our class name and if we save you'll notice nothing is red and that's because you need to apply classes to your HTML so I could come down here and say that our class is going to be equal to red and now our div 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 item is red also so any element that we give the class of red to is going to have this style here because we give it this dot red selector so anytime you want to select a class it has to start with dot and then the class name another type of selector is going to be the ID selector it's very similar to the class selector but you start with the pound sign and then you type in the ID that you want to be so let's say for example blue you're going to be Rd and we'll change this color to blue here let's give this span an ID of blue so we just say ID equals blue and now we save and you can see our span has that blue background color but one important thing to note is that if you use ID selectors you can only have one ID on a page so an ID selector is generally something you don't want to use because you're going to only have one on a page it's very specific and it's generally not so useful also when you're using a selector like div for example this is also not very useful because I don't probably want to style all of my divs exactly the same I probably want to style some divs differently some not the same so you're generally not going to use the element selector most commonly out of these selectors you're going to use that class selector where you're saying red for example this is because you can share this across whatever elements you want by just giving them a class you can share it between multiple elements you can have it on just one you could have on 10 you could have it on none it's really flexible and that's why it generally you're going to use classes over IDs and elements now this is the most basic types of selectors but what happens if you want to combine together different selectors well that's actually really easy to do what if I want to select only divs that have the class of red well all you need to do is put these selectors together without any spaces between them so I could just say div dot red and I save and now you can see only divs that also have the class of red are going 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 div but it doesn't have the background because it doesn't also have the class of red so that's something really important to know if you want to combine together selectors you just keep adding them together without any spaces for example I could say divs that have the class of red and the class of green text and if I give this a class of green text and I give it a color here of green you can see that now only divs that have the class red and the class green text have the Styles applied if I remove the green text class it no longer matches all of these selectors so it's no longer going to have those Styles applied 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 and I wanted to give them a certain style and I wanted to select all of my L eyes and also give them the same style 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 we could say our background is going to be red and now you can see our span has a background color of red and every single one of our allies also has a background color of red and that's because we put the comma between them and we can even go a step further and go that any span now is red and any li with the class of red is also red and we save and you'll see only this first one which has the class of red is red and our span is red as well so we're able to combine together all of these different selectors whether it's with commas or by just concatenating them together in order to do and operations as well as or operations so that right there just those few little selectors is probably about 40% of all the CSS selectors you're going to write because generally you're just going to be selecting things based on classes combining together classes we're using the comma to say this class or that class but what if you need to do it with something a little bit more nuanced what if you want to select elements inside of other elements it was actually a really easy way to do that let's say that we want to get all of the L eyes inside of a UL we could say a UL space Li and save and now you can see all of our allies are having this background color so a space essentially says that anything inside of an element that comes before it so any Li inside of a ul is going to have this red style here 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 and then inside of that span we're going to have B and we're going to say nested text just like that and now let's say that we want to select any B tag that's inside of a div what we could just say div and a B and now you can see this has a background color of red because this space selector essentially says anything inside of a div whether it's the direct child a child of a child a child of a child of a child of a child 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 tag 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 this background color of red you can use any different combinations of selectors you want I'm just generally going to be used element selectors because it's easier to get the point across now another type of child selector that you can think of is the direct child selector and this one is using the greater than symbol here and then if we put be for example unsaved you're gonna notice our B tag no longer has that red color and the reason for that is because this BTEC is not a direct child of our div this says it has to be the direct child and our direct child is actually this span here so the B is not our direct child our span is the direct child of our div we change this to be span than B you can see the B tag is the direct child of our span so this will properly give it this a red background color so this greater than symbol is always going to be direct child well if it's just a single space it can be any level of child it does not have to be the direct child now the last two selectors that I want to talk about in this section are going to be based on sibling selectors so it's essentially getting a sibling of an element and the way you define a sibling is inside of this HTML we have our body and each one of these elements our div our span this div and this ul are all siblings in the body and then these lis are all siblings on themselves because they're all inside the same element 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 Li that comes after in Li with the class of red so we can say Li dot red and then if we put a tilde symbol this is saying give me every single Li that comes after an Li with the class of red and if we save you can see all three of these allies come after this Li with the class of red if we actually move this class red down to item two and save you'll notice that even though item one is a sibling of item two it doesn't actually get selected by this selector because it only selects elements after so we found the Li with the class red it's right here now we're only getting the siblings that come after it which are items three and a four 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 what you can use instead here is the plus symbol and now if we say if you'll notice that this will only get the very next child that is going to be having that Li here and that's because unlike the general sibling selector which is that tilde that selects all siblings that are afterwards the plus is only going to match the very next element that comes after it so we're only getting the Li that comes directly after this Li with the class of red and if we were for some reason to say that this has a class of green and we wanted to get allies that have the class of green and we save you'll notice nothing is actually styled and that's because this plus symbol only checks the element directly after which is item three which does not have a class of green so it does not actually match this selector now with these different types of descendant and sibling selectors that's probably another twenty percent of all the CSS you're going to write and next I want to talk about pseudo classes which are probably again another twenty percent of all your 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 the page so let's for example say that we want to select every single li that a user hovers over what we do is we put this colon and then type in hover every single pseudo class is going to have a colon followed by the actual thing that we want to check for in our case hover now if we save and we hover one two three or four every single one is going to have that red background as soon as we hover over it another type of pseudo selector is the focus pseudo selector so let's get an input element inside of here let's just say we're gonna have an input and if as soon as we click inside of this input we're essentially giving focus to this input we're focusing on this element by clicking on it so now it has that background color of red and when we click outside of it you can see it no longer has that background color this is based on where the users focus currently is on the page this works with things like buttons and form inputs which is where 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 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 while if we do not have required it just has a normal white background color also we can check check boxes by saying checked so if we were to come in here and say that this is a check box instead whenever we check this check box the background color should be red but since you can't really modify the background color of a check box I'm gonna come in here and change the margin to be 50 pixels when it's checked so if we click this you'll see it has a bunch of margin around it when it's checked and when we uncheck you can see all of that margin disappears and again just like with checked we can check for disabled and now if we save you'll see now that happens but if we change this to be disabled and say if you now see we get that margin around it because it has that disabled status applied to it now those are the most useful selectors when it comes to interactivity with the 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 are positioned on the page whether it's the first child the second child the last child so let's look at those a little bit by selecting our allies we could say Li first child and we want to come in here and just say background is gonna be red if we say if you can see the first li child has a background color of red 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 let's just come in here and say what if we wanted to select the first Li with the class of red well now you'll notice this no longer works because first child only selects the very first child which is item one it doesn't select the first child that matches the selector it just selects the very first child we can do a similar thing to first child where if we just get rid of this red here 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 force and then if we want to select some combination in between we can say and the child and in here 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 2 n this is gonna select every other element can do 3 N and it's gonna select every third element we could say you know 1 or not 1 to n minus 1 that's gonna select every other element but it's gonna offset by negative 1 so it's gonna start with 1 instead of 2 and so on so you can write in any formula you want you can also do the same with last flips and last child and does the same thing but it starts from the bottom and goes up and then lastly there is something called only child which just is like this 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 and you can see that this span here is the only child inside of this div so that's why it has the background color of red while this span is next to a bunch of other children so it does not have that red background color and very similar to the child we have something called type so we could say here first of whoops of type and now you can see that the first element of this type span that you find inside of our selector so our very first span element here and our first span element in this container both have a background color of red we could also do last of type if we change this to Li for example you'll see the last of an Li in our list is going to have that selector if we came in here and added for example something else like a span inside of here and saved you can see that this Li here at the bottom still has the correct style and applied to it even though it's not the last element it is the last of the type Li which is what this of type stuff is doing we also have end of type same exact thing we could say - or you can say and last of type it's all going to work exactly the same and then finally you have only of type like this get rid of the two here this is going to return if is the only of that type so if we did span again you can see that these are the only spans in their containers now the very last pseudo class I want to talk about is the knot - pseudo class and this in my opinion is the most powerful because you can pass it any other selector you want inside of here and it's going to essentially say I want to select any element that does not match the selector you pass to it 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 & 3 but since item 4 has a class of green it is not being selected by this selector because of this not pseudo class now we've covered pretty much all the pseudo classes that you're going to need to know and we can move on to pseudo elements which are much simpler because there's only really two that you need to know about let's come in here and say that we're gonna select our div here with the class of red and we want to get deep before pseudo element so it's gonna be two colons followed by the pseudo element which in our case is before and if you're confused about pseudo elements I have a whole video on them in the cards and description a link for you but in here let's just put a content which is just gonna say before and then we'll do a background of red and as you can see the text before is being appended before our div with the background of red and the other pseudo class here pseudo element I'm sorry is after so let's just change our text after and you can see that shows up after our div fairly self-explanatory again if you want to check these out I have a full video on them where you can really learn all about the use cases and how you can use pseudo elements now the last set of selectors I want to talk about this whole video are attribute selectors and these probably cover about the other 5% or so of your CSS selectors they're much less common but they're pretty powerful and have some really great use cases so let's say I come down here on this div instead of having a class of red I give it a class of you know data red this is a data attribute custom one that we applied to our div now in order to select elements based on data attributes you put them inside of brackets and then we just type in our attribute data red has a background of red and now you can see this div has a background red because it matches this data attribute of red that's pretty self-explanatory it's a lot like your class selector except for here you just wrap it in brackets what if you want to check for a particular value let's say we want to say data red is true what if we want to check for that particular value you just say equals and then inside of quotes you put your value in our case oops true now if we save you can see this is still red because it matches that value but if we change this to something else like false you can see that it is no longer matching this selector up here but if we were to remove this equal section it'll still match because it's just saying any class or any element that has that data attribute it doesn't matter what the value 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 ways that we can compare for values of our data attribute as opposed to just equals because equals is same exact match what if we want to do a partial match for example if we wanted to say I want the beginning of this to start with a one two and you can see our color is red that's because beginning of data at red begins with one two that's what this carrot symbol equals and does we were to change this to two one two you can see it no longer matches anymore we can do something similar with the dollar sign that's the end of it and if we say we wanted to end in two three you can see it as now red because it ends in two three but if I were to put another three in here and no longer ends in two three so it does not match this but if we want to match a data attribute that has the value two three anywhere inside of it for example in the middle here we could change this instead of having the dollar sign we could the star here and now if we say if it says anything that has a 2/3 inside of it like it does here it'll work but if we change this to 4 you can see 2 3 no longer shows up inside of here so it's no longer matched by this selector and those are all the CSS selectors you need to know 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 you subscribe for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 123,545

Rating: 4.9798102 out of 5

Keywords: webdevsimplified, css selector crash course, css selectors, css selector tutorial, css selector specificity, css for beginners, css introduction, css selectors guide, css selector chaining, css tutorial, css project, css concepts, css guide, learn css quick, easy css, css beginner, css selector beginner, css beginner guide, css beginner tutorial, css selector guide, learn css, css tips, css tricks, css tips and tricks, css advanced, css advanced selectors, css, css easy

Id: l1mER1bV0N0

Length: 19min 38sec (1178 seconds)

Published: Tue Jul 07 2020