Specificity & Inheritance Solution

[00:00:00]
>> Hopefully you did really well with that exercise and you don't have many questions. But if you do I'm gonna explain all of these selectors to you now at this point. So just previously in the example to show you how to do the exercise. And just explain the footer to you, so I'm gonna start here with article-joe.

[00:00:17]
And the specificity for this one is 0-1-1, we have one class, the class of joe. We have one element, that's the article, and the text will be brown. Notice here on the page that, the article is for the most part brown, although you'll see here that we have some blue going on.

[00:00:36]
Kind of weird, maybe not sure where that is coming from yet, but not from this style. Probably there's some inheritance that comes in later on, or perhaps a more specific selector depending on what happens. The next one is p::first-of-type + p, so we have to figure out where this is happening.

[00:00:57]
If we look at our HTML, notice that the first child of this article is an h1. So paragraph as a first child, would not be effective as a selector here, we have to use first-of-type. So the first-of-type is this item here this paragraph by Erica Lee. So the paragraph that is the adjacent sibling in other words the next sibling right next to this one, is here on line 6.

[00:01:29]
So this line that starts Coffee, this is the one that will be affected by that particular style. And that is the text-transform: uppercase, and as you can see here that whole paragraph is indeed in uppercase. The other paragraphs are not affected because they are not an immediate adjacent sibling to that first paragraph there on the page.

[00:01:52]
Notice that our specificity is set to 0-1-2, that is because first-of-type is a pseudo-class, and our two Ps those count as types. So we have 0-1-2 no IDs, the next one is p:nth-of-type subscripts. And so we have to first determine which is nth-of-type number (2). That is the paragraph that is all in uppercase, that's our second paragraph.

[00:02:18]
We're looking at the subscripts, right here next to that chemical formula for caffeine. There should be some subscripts they're not currently there. We are using visibility: hidden to hide those subscripts I have no idea why. A chemist would not be pleased with me, but that is, where that style is applying, and why it is applying here.

[00:02:40]
Notice that the selectors, specificity is 0-1-2, nth-of-type is a pseudo-class, sub and p are HTML elements. The next one is p::first-line so first-line, is a pseudo element, p is also a type so together it's 0-0-2 for our specificity. This is affecting the first line of every paragraph, and notice that the byline here by Erika Lee, is also blue.

[00:03:09]
It may be a very short line, it may be the only line in the paragraph it is still the first line. And so therefore it is blue in addition to the first line of all of these other paragraphs. And notice that, first line is really adaptable so even as you change your screen size, CSS keeps up.

[00:03:26]
And however many or few words you have on that line, they will remain blue. The next one is h1::after and h1::before, after and before are also pseudo-elements. So the specificity of each of those selectors is the same it's 0-0-2. We are gonna add some content, in this case a coffee cup before and after I need coffee, and that is what's going on here on the page.

[00:03:53]
So, that is the way that one shakes out.