SOURCE: https://www.youtube.com/watch?v=wuDFNna9wao
Next, let's talk about the concept of specificity. Now specificity also has a pretty simple rule, and that is most specific selector combination wins. While this is a pretty simple sounding rule, I would say that forgetting about the concept of specificity and how its simple method in CSS is what trips up developers most often. Let me show you a pretty straightforward technique that will let you figure out which selector combinations are most specific than others. You can think of specificity of your selectors as keeping a score. The selectors with the highest score win. In other words, the selectors with the higher score would be considered the most specific. It's easier to calculate the score if you arrange the types of things that affect the score from left to right, with the left being the highest value of specificity. Then simply take your CSS rule and fill in the number of times you see a particular type of selector being used in it's proper location. The number that's created is your final score. So let's take a look at our four boxes on the screen. The most specific targeting that exists in CSS doesn't actually use any selectors at all and that is the style attribute on an element. And that happens when you define your CSS declarations straight on the element using the style attribute. And that makes perfect sense, right, since specifying the style attribute is like pointing to an element with your finger and saying, that one. There's nothing more specific than that. And that is why the style attribute is the most left box. Next is specificity value, comes the ID, then the class or pseudo-class, and then the number of elements that are used in your selected combination. So if we tale a look at this example, which says h2 style equals color green we see that we're using the style attribute which means this box gets a one and the rest of them get a zero. And this is pretty much the highest score a thousand that you can get.
Take a look at a different selector, for example, div p and color green, you see that it's not defined inside of a style attribute so that gets a 0. There's no ID selector so that gets a 0. There's no class definition selector either so that gets a 0. But there's two elements, here we're using a descendant combination of selectors, div and p. So, therefore, the number of elements that we have is two. That's why the last box gets the number 2. So let's see how this would work if you had to compare and see which one of the selector combinations would win. So if you're targeting a particular paragraph tag and in one case you're targeting it with the set of selectors that are shown on the left side of the screen, and in another case you're targeting it with a set of selectors that are shown on the right side of the screen, which one would win? In other words, the color of the text of that paragraph. Would it be blue, or would it be green? Well let's quickly calculate their scores. The one on the left is not using the style attribute, so you know that gets a 0. It does use an idea attribute, so that gets a 1. There's no class So that's a 0, and the number of elements is a 1, so that gets a 1. So the final score of the left is 101. On the right, likewise we're not using the style attribute so that gets a 0. We're not using an ID attribute, so that gets a 0 again. We're using one class, so that gets a 1. And we're using two elements so that gets a 2. So the score is, 101 versus 12. So obviously the one on the left wins and the text color of our paragraph will be blue, not green. Looking at the score on the left and the selectors we've chosen to get that score, we could see that we really could have won this selector battle by not specifying the div there to begin with. We could have just expressed it with an id selector and still would have won this battle and therefore the color of the text to that paragraph would have still been blue. So let's jump in to our code editor and see this concept in action. Okay, so here we're in sublime text, and we're looking at specificity.html. And this is a pretty simple document. All it has is really one paragraph tag, and it's sitting inside of a header tag with class navigation. If you look at the styles that are specified for this document, we have two competing styles. One is trying to make the text color blue, and the other one is trying to make the text color red. Obviously, as you can see on the right side in the browser, the text color ends up being blue. Why is that? Well keeping in mind what we just learned, the specificity rule here is what's in play. Both rules have one class so that gets us a ten. However, the first rule has two elements specified and the other one only one. So this gets a score of 12. And this gets a score of 11. So this rule wins. There's one more concept that I'd like to show you. And that is a concept of overriding all these rules taken all together with the !important. Here we have a third way to define this paragraph tag. And its color, its text color, to be green. And this time I'm going to define it with the word !important. An !important basically says, it doesn't matter what the specificity is, I want to override everything and make this property they way I'm defining it. So here, we define the color being green. So if we refresh the browser, even though this is a much less specific rule then this one, this is just, gets a score of 1, and this, remember, is a 12. Since we specify important, our color of the text will turn green. Now, I want to warn you about using this !important. While very tempting to skip understanding all these cascading rules and specificity rules and just slap important everywhere whenever things don't work out, this will very quickly on a real world project become a maintenance nightmare where you'll be overriding one important declaration with another important declaration and you'll basically start working out your own system where gigantic mess will be your most important rule. So avoid using important unless you absolutely have to. In summary, in this lecture we spoke about the Cascading algorithm. The origin, the origin precedents, how the declarations merge as well as inheritance and specificity. The Cascading algorithm provides pretty precise control over targeting content while allowing you maximum reuse of styles across your website, and that is basically what makes CSS so powerful. Next, we're going to talk about styling text.
Video Images
0 comments:
Post a Comment