ABSTRACT
In the previous post, we outlined the four basic levels of specificity, as well as a couple of modifiers. I mentioned that these can be combined in various ways to make specificity a bit harder to determine, but also a great deal more useful.
ROLLING UP OUR SLEEVES
Okay, we are gonna get a great deal more complex with our examples. Sorry.
<html> <head> <title>Example 18</title> </head> <body id="mr_boddy" class="overall_body_class"> <div class="container_class" id="main_container"> This text is in the main, outer container. <div class="secondary_container_class" id="secondary_container"> This text is in one level. <p class="tertiary_container_class" id="tertiary_container"> This text is in two levels. </p> </div> <div class="secondary_container_class secondary_container_class_2" id="secondary_container_2"> This text is in one level, but via a second container. <p class="another_container_class" id="another_container"> This text is in two levels. </p> </div> <p class="inside_container_class" id="yet_another_container"> This text is in one level, but via a third container. </p> </div> <p class="outside_container_class" id="yet_another_silly_container"> This text is in a second, outer container. </p> </body> </html>
For the rest of this discussion, I’ll just mess with styles in the <head> section, and that will be all I’ll show here. The examples will contain the full markup.
The first thing that I’ll do is outline the <div> and <p> elements, so you can see where everything is (the main body is yellow, <div> elements are red, and <p> elements are green):
<style type="text/css">
body { border:1px solid yellow }
div { border:1px solid red }
p { border:1px solid green }
</style>
Okay, let’s start playing with specificity. Before I start, let me outline some more things that will make a difference in establishing specificity:
- Only those properties that make sense for an element will be applied to that element’s node value. Ones that don’t make sense will be ignored (for example, a “list-style-type” property makes no sense for a <div> element, but will apply to child <li> elements of that <div>).
- All inherited properties that do make sense for a given element apply at specificity level 1.
- An inherited property will travel down an entire container hierarchy, so some property that is applied to the <body> element can affect a <p> element that is many levels down the chain.
- A property that is specified must be explicitly countered in order to remove the effects of being specified (i.e., if the “color” property is specified as “red” in the <body> element, all text, in all elements -except for a couple of special cases- will display as red, unless they specify, at a higher specificity level, a different value for the “color” property).
I’ll leave the borders up. Since I won’t be monkeying with border properties (yet), they will remain as they are.
Let’s start by doing exactly what I just mentioned. We’ll set the <body> text color to red. There are two elements that you can specify to affect the entire document: <body> and <html>. <body> is a child of <html>.
<style type="text/css">
body { border:1px solid yellow; color:red }
div { border:1px solid red }
p { border:1px solid green }
</style>
Every single word on the page is now displayed as red. The “color” (text color) property is one that makes sense to almost every type of element’s node value. Because the property was applied to the outer container element, the specificity of the property is extremely low. It’s very easy to override. Let’s do that now by asking <p> elements to display as black text. Remember that the “general” CSS rule is also a very low specificity, but it is still specificity level 2, which trumps the inherited specificity level 1 property:
<style type="text/css">
body { border:1px solid yellow; color:red }
div { border:1px solid red }
p { border:1px solid green; color:black }
</style>
Notice that the text enclosed in <p> elements now displays as black, while the text enclosed in just the <div> elements still displays as red.
Now, if we switch the black specifier from the “p” rule to the “div” rule, what do you expect to happen? Think about it for a minute before you click on the example link:
<style type="text/css">
body { border:1px solid yellow; color:red }
div { border:1px solid red; color:black }
p { border:1px solid green }
</style>
Everything except the last <p> element displays as black. This is because the rule applied to <div> elements co-opts the rule applied to the <body> element, and, because it is the same property, it replaces the “color” property, both for <div> elements, and their child elements (The child elements still get the “color” property at specificity level 1, but it now has a different value).
We can also use the more standard CSS “cascading” behavior to specify an additional property, as opposed to replacing an already-specified one:
<style type="text/css">
body { border:1px solid yellow; color:red }
div { border:1px solid red; font-style:italic }
p { border:1px solid green }
</style>
And we’ll do the same, only this time with <p> elements:
<style type="text/css">
body { border:1px solid yellow; color:red }
div { border:1px solid red }
p { border:1px solid green; font-style:italic }
</style>
Okay, so far, we’ve been messing around with specificity level 1 and 2. That’s nice, but let’s start looking at level 3 (class attributes) and level 4 (id attributes).
I’ve assigned classes and IDs to many of the elements in the markup, and we’ll start attaching CSS rules to these in the next section.