HTML & CSS for Absolute Beginners: Descendant Selectors

Key Takeaways

descendant selectors are a useful way to be able to select things in more specific ways just like we have class selectors uh and these types of things can come in handy and so if we take a look at our HTML that we have in this project right now we could say if we wanted to select something specific that's a descendant without having to add a class to it and one example of this uh for me would be in this tebg area we have right now where we have a different background color and text color on it if I wanted to select these strong elements that are in here because right now we have uh if we go and find that here we have our teal BG inside this div and then we have a strong here and I have another strong over here and I might not want to have to go and select these with their own classes every single time if I always want these strong elements that are inside my tbg to be styled in a very specific way so what I can do is in my stylesheet here we can come down and here where I have my tpg I like keeping related Styles together so I'm going to stay here I'm going to do tbg and then I'm going to put a space and then after the space I'm going to write the other selector that I want which is my strong and we'll explain this in a second but for now let's just say uh that we want the color to be yellow cuz it's going to stand out and be very obvious that we've changed it and now we can see that the colors have changed over to Yellow there and the reason this is working the way that we read this when we have descendant selectors is we have the strong element that is inside of my tbg here and we could technically take this like to a further level cuz my tbg is inside of another element so that's inside of a section so if we wanted to I could say a strong that's inside of a tebg that's inside of a section that is inside of your body and your man and all these other things uh I would suggest not doing that though when we're doing these we want to be select the element you want in the one situation it's in but be like a spec but be specific with what you want and don't overdo the selector cuz sometimes you see people that go overboard with these and they get like six descendant selectors in a row and that actually makes it a lot harder to use them properly and there's other potential issues that can come along as well so having our strong uh with the tbg like this is sort of the furthest I would generally try and bring something like that I wouldn't try and have multiple descendant selectors here uh and the advantage of doing this is now if ever you know I'm not saying this is a nice design I probably wouldn't make it yellow like this though if you want to put a different color that works better with the color scheme by all means uh go for it right but the advantage of doing this is I decide I want this entire section to be switched over so I come when I say class is equal to teal BG because our classes can be reused in different ways so this time I'm going to put it on my section the entire thing switches and this actually gives us another opportunity to look at a good solution here as well uh but let's say in here we don't have any right now so in here we could come in and add a strong uh right there so strong and then I can take that Closing one refresh my page and right away that's changed to Yellow I don't have to remember oh I need to put a class on this now as well when every single time I want a strong that is inside of my tbg I want it to have that color uh this is as I said a nice actually accidental uh one that came up and now we actually have a bit of a problem cuz I have my teal text here which made the text invisible I wouldn't necessarily change the color of the teal text here uh just cuz I think that you'd be getting a little bit weird but we could we could keep it if we have a teal BG Maybe stays teal but it's much lighter instead so here in my teal BG we could do a class selector in the same way teal BG do teal text because that is problematic and makes our text invisible to read and then we could come in with a lighter uh color so I'm just going to write teal here uh not to actually use it but just to get my Color Picker and then I could come in and choose like a lighter teal color potentially and if we refresh it's not light enough so I'm just going to come in with an even lighter one save there it's getting better I'd probably still even go lighter than that um but anyway we'll find a color that works just as a quick example on the type of things we can do I'm not going to keep these colors and the setup for future lessons uh we could even if you want to practice this a little bit more and you've been following along with the course so far you could also fix the link using a similar one because our link is now really hard to read as well so that could be another uh extra step you could do along the way just to make that readable and so yeah we won't necessarily be keeping this longterm though I'm going to keep it around for the next lesson if you're following along because we're going to be talking about specificity and descendant selectors are actually playing an important role in how specificity works