Combining Inheritance & Specificity

[00:00:00]
>> Now that we understand how inheritance works, now that we understand how specificity work, let's put these two together and see how they interact. So I am taking the look now at chapter three inside of the course website and we are looking at specificity and inheritance together. And I am looking at the code pen that we have here.

[00:00:25]
All right, so the first thing to do anytime you start working in CSS is always to look at your HTML first and understand what's going on with that. So we'll start with, we have an article. It has an id of coffee and it has a class of Joe, followed by an h1, we have a paragraph with a link inside of it.

[00:00:44]
We have a paragraph with subscripts. This is the formula for caffeine. And in chemistry, those would wind up being subscripts. So that's why we have all those little sub tags that are in there. The next paragraph we have some superscripts inside of it, those are footnotes and a 10th place.

[00:01:04]
So those typically go up a little bit, so we are using superscript for that same thing in the next paragraph. And then we have a footer. The footer contains some references. We have an h2 for our references, we have an unordered list, and there's some links inside of that.

[00:01:20]
So that is what's going on here. Now let's just say that I want to style some of these superscripts. Those are the ones that go up. There's a number of them that are inside of the second paragraph, and I guess we have one inside of the third paragraph.

[00:01:36]
There's a few different ways that I could wind up writing selectors for this. So let's write some of these. I could say article has the color red. So that is going to turn almost everything here on this page red. Why are the links not red? If the links are not red because they have a more specific selector that's coming from the browser's style sheet.

[00:02:02]
They are targeted towards those links. They wind up being blue and underlined when they are not visited. So that is why that looks the way it does. After this, we can add to this the p, with a color blue. Now, the way we have this right now, the paragraph comes later, you may be thinking to yourself, okay, it's later in the style sheet, so that wins.

[00:02:25]
But even if I was to take this paragraph, with the color of blue, and put it before the article, you would find out that we still have blue paragraphs and that is inheritance at work here. Inheritance is saying that we are closer to some element that we might be targeting.

[00:02:44]
In this case we're going towards the sub, the superscripts. And the paragraphs are a little closer now everything is is blue here. And then the last one we can add then, of course is to target sub itself. And we'll say something like color brown or possibly even let's just make it black again.

[00:03:08]
We make them black. No that didn't really work, let's do brown. They'll be a little bit. Stand out a little bit and we'll add to that a font weight of bold to try to get them to stand out a little bit. So as we get close and closer to the targeted elements, we have now three styles that would all impact our superscripts, they all have exactly the same specificity.

[00:03:37]
So supstyle come last. We could put it earlier in the cascade here, earlier on the page. It still takes effect. This is because of inheritance and we are trying to target those superscripts and this is the closest to that. Now, we could, of course, make our article a little bit more effective on those superscripts.

[00:04:03]
You might be thinking about this. We might just wanna add a class to it. We do have that class here inside of our HTML. We have an ID of coffee and a class of Joe. Let's add all of those. So if I said article of coffee.joe. So now I've got the ID and the class and the type selector all together there.

[00:04:27]
The text hasn't changed, it is still just red. The little lowly paragraph that comes later with way lower specificity that first one there article coffee Joe that has a specificity of 111. The paragraph that comes later and 001. Why is that one winning, that is Inheritance. Inheritance is saying that the color blue is an inherited color it's close to the paragraph we wind up with blue text.

[00:04:57]
So how could we make In this article style actually apply to the superscript. The way we'd have to do that is add an sup, it's up on the end. Once we've done that, then we are in fact targeting our superscripts which are now red and maybe we can set a background color of black to make them stand out even more.

[00:05:20]
There they are, on the page. And that wins over the brown that we had previously because now this is got a very specific selector that is in fact targeting those superscripts. So now the specificity is winning out over just the straight inheritance. So the next time you are puzzled as to why some type of elements, just plain old element, a type selector is winning over your super specific bang important type of style, this is the reason why.

[00:05:53]
Inheritance is going to take priority in some situations over specificity.