ABSTRACT
The last part of standard CSS specificity is the element ID. You can assign any markup element an “id” attribute. “id” attributes can be assigned to any element on the page.
<body id="mr_boddy" class="overall_body_class">
The main thing about an ID is that it must be unique on the page. No other element can have the same ID, regardless of what type of element it is.
REFERENCING IDS
Elements are referenced in CSS by preceding them with a “hash/pound sign”, like so:
#mr_boddy {
border:1px solid yellow;
color:red;
}
As in using classes, you can increase the specificity by preceding the element ID with the element type:
body#mr_boddy {
border:1px solid yellow;
color:red;
}
An ID is the highest regular component of specificity you can use (it is possible to get higher specificity, and I’ll cover that later). In most cases, you won’t need to get much more specific than just an ID. However, IDs can be very useful for doing some really neat tricks in CSS, which I’ll cover in later postings. This is just the basics, and I want to show you how you can use an ID to increase specificity.
First of all, an ID isn’t actually as generally useful as is a class. This is because it applies to only one single element. IDs are generally used to increase the specificity of child elements of ID’d elements. I’ll cover that in my next posting.
Let’s review our big markup file:
<html> <head> <title>Example 33</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>
Notice that everything has IDs:
<html> <head> <title>Example 33</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>
OK, now, let’s give the <body> element a big purple border:
<html>
<head>
<title>Example 34</title>
<style type="text/css">
#mr_boddy { border:2px solid purple }
</style>
</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>
Just to prove that this has a higher specificity than other rule selectors, let’s do a quick proof:
<style type="text/css">
#mr_boddy { border:2px solid purple }
.overall_body_class { border:1px solid yellow }
body { border:3px solid red }
</style>
Note that the body is still outlined in purple.
There is one way to override the ID:
<style type="text/css">
#mr_boddy { border:2px solid purple }
#mr_boddy { border:3px solid red }
</style>
This was because of the modifier that says rules defined after other rules with the same specificity have precedence.
If we reverse them, we are back to purple:
<style type="text/css">
#mr_boddy { border:3px solid red }
#mr_boddy { border:2px solid purple }
</style>
However, we can increase the specificity of the “red” rule in a couple of ways:
We can add the element type to the selector:
<style type="text/css">
body#mr_boddy { border:3px solid red }
#mr_boddy { border:2px solid purple }
</style>
We can add the class name to the selector:
<style type="text/css">
#mr_boddy.overall_body_class { border:3px solid red }
#mr_boddy { border:2px solid purple }
</style>
Or, we can do both:
<style type="text/css">
body#mr_boddy.overall_body_class { border:3px solid red }
#mr_boddy.overall_body_class { border:3px solid yellow }
body#mr_boddy { border:3px solid green }
#mr_boddy { border:2px solid purple }
</style>
Notice that I threw in examples of the other two increased specificity selectors as well. In fact, why don’t we just go down the whole list, while we’re at it:
<style type="text/css">
body#mr_boddy.overall_body_class { border:3px solid red }
#mr_boddy.overall_body_class { border:3px solid yellow }
body#mr_boddy { border:3px solid green }
#mr_boddy { border:2px solid purple }
body.overall_body_class { border:2px solid blue }
.overall_body_class { border:2px solid black }
body { border:2px solid cyan }
</style>
The tricks I showed you in the last couple of examples are how we can tailor the specificity of our styles fairly well. In the next posting, I’ll talk about how we can use enclosing elements (parent elements) to focus the specificity of our rules.