HTML & CSS for Beginners Part 16: CSS selectors and Specificity

Key Takeaways

in this video we're gonna be looking at CSS selectors and specificity so more advanced ways to select things instead of just looking at h1 h2 paragraph or specific classes we can be more specific and do more powerful things so let's jump right into it [Music] so we know that we can select a tag so my I can select my paragraph tags by bringing the P or again select my body by writing body h1 h2 and all of that and then in the last one I showed that we can select multiple ones at the same time so let's just say I could do also my P and may h1 and I could say color is green and the color of my paragraphs and my h1 will become green so that's nice so here's one thing that's really important that I didn't mention before that I completely forgot about that it's really important though is I've declared my paragraph color and my h1 color up higher so I have a body color I have my h1 color and I have an h1 color here and I have an h1 color down here and this one is winning and it's always the one that's farther down that wins so a lot like when I looked at my links before and the order that they were coming in it it's the last stuff at the bottom that wins so something you know if you're trying something that's not working maybe you accidentally you know you're trying to change your paragraph color maybe you already changed it lower down just something to keep in mind that the one that's after always wins so that's one of the things I wanted to look at the next one is I've changed my layout a little bit here so the layout looks much the same but I've come and I've added a class of intro to my paragraph here and then I've put a div of body text here that has a few paragraphs a few links and I've even added a class of important link to one of my links over here so this link here is an important link so let's come back into my CSS and what I want to look at now for the selectors is how we can select certain things so we know we can select all of my paragraphs with by putting a P tag but what if I don't want to select all my paragraphs what if I only want to select these two paragraphs here well they're inside of my class of body text and we know we can select my class of body text by putting docked body text so if I do body text let's do a few things here I want to put a background on there just so we can sort of see the area and one thing I found out between one of my earlier videos and this one if you just do not even CSS just running color picker do a su Google search for color picker you don't need to go to any links or anything like that like I showed you last time you just get this awesome color picker right here and come through choose whatever color you want and it works really really well so let's just go and choose a blue I'll copy my hex code and let's put that as my background color background background color save that with my and I have my background and now I want I don't like that my text is touching it on all the sides so I need more background think about it for a second we've covered this before how do I get more background I need to do what is it hope you said padding I'm sure you did and let's just do padding 50 pixels on all sides refresh there we go yeah so there's my intro paragraph and I've done that but now I need to change this a little bit I want to change the color of my text to white and then I my links in there and I want those links to be different as well so what I can do is because if I do P it's gonna select all my paragraphs but what I can do is body text space P and what body space space P will do is it's going to select my paragraphs that are inside of body text so now if I do color white those ones become white but it ignores this paragraph so this is a really important thing to know that we're gonna be using shortly and I really want to highlight it it's very useful and very good to know so just to replicate that again it's hard to see these links here this color is really similar to the background so let's go to dot body text space a-and let's come to my color picker again and choose a new color let's get something that stands out copy that color oops I need to write save that and oh I still can't really see that it's too dark [Music] it's a little bit better and I can even right now I have a hover effect on these and I that hover effect is gone is I so I can now do my body text a hover and let's just make that a color of say ddd which would be a very very light gray there we go so I get my little hover effect on those and those are now different from these ones because they're inside of body text and if I got rid of this here save these would now get the same hover so all of my links are getting the same hover because this hover is replacing that hover that I have up here so let's undo that save that so it's a nice way to distinguish between things without always having to add new classes to things and all of that I don't need to give all of my links at class I can just say that all of my links inside of this one thing have this style to it and when I did this important link I'm gonna add this class up here to a class important link and the main reason is just to show you even more that we can do with this so if I have an important link and let's just say the color is yellow it's important so we really want it to stand out and this one has become yellow but this one hasn't become yellow even though this one is an important link so that's kind of weird right so what's happening in this case is something called specificity which I'm probably saying wrong and I struggle at it so I'm not going to keep repeating myself but basically we can actually get a calculator for this so it's a specificity [Music] calculator CSS right here at the top and what's happening is we have our important link right here and our other link is a our other selector that we used is this one let's copy and paste it so this link here is a link inside a body text but it's also an important link and what's happening is my a body text space a is sort of with 11 points so specificity and what it is it's how specific our CSS is so what's happening is this is worth all tags are worth effectively one point is sort of how it works and then all of my classes are worth 10 points so if I had three classes I'd have 31 just for an example so even though I've put an important link directly on that link it's not coming in because this selector is winning so my a body text is more important than this one even though this is an important link and that one should be winning so that's kind of annoying and can sometimes get these annoying problems that come up so what I could say here is that I have my important link my important link is also let's just do a comma and say that this is dot what should I call that body whoops ha dot dot body text space dot important link so my important links inside of body text and I look at that now they're both the same come back to here and just to show you this is now worth 20 points because it's two different classes so I guess I should have done this one up here so obviously this one which is 20 is bigger than 11 so this one when and I'll put a link to this in the description below if you want to play around with it a little bit but you can imagine then if I have another Dave over here that has another name and then my important links aren't working and I have to add another selector to it and then another one and another one it can get annoying so there is a way around this and it's by putting a space and then writing important but it's a super important not to imbues important so I'm going to save that and refresh and just show you if you put important on something it means it's just gonna overwrite all the time pretty much so if my important if I have my important link is color yellow because this is important it doesn't matter how specific anything is this this is gonna overrule any other CSS rule some people abuse important and they start throwing it on everything either they've done a bad job of organizing their website or they've done a bad job of organizing their CSS and it just gets into this important battle because then if you have two things that are important that are on the same thing you run into the same problems that you had before so whatever you do important is a last case scenario like okay this is gonna get annoying and I have to make a whole bunch of selectors when I should only need one go for it most of the time you shouldn't need this this is a last ditch like okay this one thing needs it and that's it it's not something you're gonna use all the time and I can't emphasize that enough so that's it that that's CSS selectors just a little deeper dive into CSS like there's nothing too crazy here I hope you liked the video I hope you hit the little like button right now you haven't done it on any of my other videos hit the like button if you haven't commented in any of my other videos and you've made it this far where like 15 videos in or something like that if you haven't commented yet and you've watched 15 of them leave me a comment below and say I've made it this far just let me know even if you don't like them I'm guessing you like them if your 15 videos in you get the point let me know say hi say I like the video or it's confusing or anything you want to just give me some feedback I really appreciate it [Music] [Music]