6.3 Priority and specificity - Video Tutorials & Practice Problems

<v Instructor>So far, we've seen several examples</v> of conflicting rules in CSS and in this section, we're going to take a more systematic look at the system of priority and specificity rules that CSS uses to resolve these sorts of contradictions and inconsistencies. <v Lee>And we know that we've been</v> using the word specificity a lot but it's a really important thing to understand in CSS because this conflict resolution aspect is one of the trickiest things in all of CSS. <v Instructor>So let's take a look at a concrete example,</v> we're gonna start with a rule to change the width of the bio-box. We'll be talking more about width in the next chapter, but this is good enough for now. So let's put a width 75% rule on this. Actually, let me save it here. So you can see it's shorter. Suppose we put in another rule right after it that says width 50%. In this case, the final rule is the one that takes priority. If you look in the text, you'll see that there's a table of priority rules. And if you look at the first one, it's called important, it's got an exclamation point at the beginning but just pronounced important. And this is something that I know Lee feels particularly strongly about. <v Lee>Yeah, you should never be using important.</v> So what important is, is a flag that you can add to a style that forces the browser no matter what the specificity is to apply that style. And if IDs are a bad thing to use because they make this kind of styling difficult where you have stuff come inherited down that you can't get rid of, important's are even worse than IDs. So understand that it exists, understand that you might see it in other people's code, but in your own, just for the love of, insert deity here, just don't use important. Once you use it, you end up needing to use it all over the place to override other uses of important and it just spirals out of control. <v Instructor>Right.</v> So this idea of specificity can be understood intuitively, you don't have to memorize the table but it's sometimes useful to refer to it. So let's look at an example of a not very specific style. We've got this here just to, an anchor tag. <v Lee>Well, I mean to use, to look at the table</v> and to look at what we just did with the two different bio-box widths. What that is right there, is the rule order. So that's number six on the table. <v Instructor>Right, number six.</v> Right, so now we're gonna start off with just a generic rule. Will this override it? Yeah. So this changes these links to gray, these ones that used to be red. And we can make it more specific by say just adding extra tags. So we've seen examples of this. We say h1, this would be more specific. Do we actually have any of these? Is it here? <v Lee>No, no.</v> <v Instructor>No, there's not an example there.</v> Yeah, so there's actually not anything inside the h1 but if we put something there, right. <v Lee>You could actually do it with it,</v> changing that to LIA but-- <v Instructor>Sure, sure.</v> But here's one example. So, this is now green. So the point is that by adding extra tags that's one way of increasing the specificity and we can also add extra classes, and so on. You can look at the table for specific examples of the different kinds of specificity. <v Lee>Really, the important thing to take away here though</v> is that when you're styling these things you're going to be dealing with elements inside of elements so it helps to understand how this works. You don't need to know every single detail of it but you need to know that if you target something with a class name, like alert in our bio-box example. <v Instructor>Yeah.</v> <v Lee>And then you also have another style</v> that is bio-box alert, that is gonna be more specific and so your styles for the alert are gonna get overridden. So, a lot of frustration that comes with working with CSS is because people don't understand how this inheritance works and how the specificity works, and they get frustrated that what they're trying to do isn't actually happening on the page. <v Instructor>And so one rule of thumb is</v> to try to keep your selectors as simple as possible, right? <v Lee>Right.</v> <v Instructor>These are good ones here,</v> is bio-box A and alert. And we have an example here of one that's not so good. There's another example from the text that looks like this, it's just crazy. It's body div with a exec bio.bio-box. So these are bunch of rules that we can change the color. <v Lee>Yeah, so this is gonna change</v> the color of the first-- <v Instructor>Right</v> <v Lee>Link to orange.</v> And it'll work-- <v Instructor>This link should change to orange,</v> there it is. So it actually does work, remember the browser doesn't care but we care because this is just a mess. <v Lee>That is an absolute mess.</v> And if you had to go back through and edit a site that had a whole bunch of selectors that worked like that you would be in a world of hurt. It would take forever to do even the smallest things. <v Instructor>Right, so if you find yourself</v> getting more and more specific like this, then that's a good indication that you probably need to rethink how you're setting up your styles. And we'll talk about that more in the next section. <v Lee>Exactly. So at this point,</v> this is where, if you saw something like this, you would say, you know what, I need a class here and you would put a class directly on that link and then you would just address that class. Or if it's in a container. So in this case, you know, it's in an alert right now. We would just use the alert or something, just something around it that is more specific. You just don't wanna get to this level of selector specificity. <v Instructor>All right, so let's take a look at how</v> we actually should do it in practice.