HTML & CSS for Absolute Beginners: Specificity + Dev tools

Key Takeaways

if ever you're running into an issue where a selector you think should be working isn't working I've already talked about how the dev tools are a really nice place to be able to find problems and they also show us specificity so sometimes it can help us see that oh it's actually losing for specificity reasons so for example let's say we come into our project here and I use this little selector thing once again and let's come down into here and just select this strong element and if we look in all the styles that are coming in here we have the box sizing we did the strong has the user agent style that's on there and then we get eventually down to this inherited div with the teal BG on there and if I hover on top of that you can see it has a specificity of 101 uh let's go and just grab our heading as an alternative cuz that's just a regular element selector so if I hover on top of that you can see the specificity is a 00 01 so we can see uh the different specificities coming in we don't actually have any descendant selectors in here at the moment but just really fast if I come and add one in so let's just say we had in our tbg so teal BG and we select our strong elements that are inside of there and we say that their color is actually going to be yellow instead just so we have a difference that we can look at uh I'm going to refresh my page and now if I go and I select on that we can see that tbg strong and if I hover my mouse on there it has the specificity of 011 and if we go down here we can see it's overwriting this but that was an inherited uh style anyway but this can be a nice way to see the winning styles are always going to be the higher up ones so if you have something else that you see is being crossed off and you don't understand why one of the things to look out for is is it inherited but the other thing that you'll be able to look out for is potentially that you have a rule coming from somewhere else that you forgot about uh or that you didn't realize will have unintended consequences that has higher specificity and then once you know that's the problem you can think of a different way maybe to solve that issue