HTML and CSS Reference
In-Depth Information
Keeping Score
The specificity of a rule is based on a “score” assigned to each part of its selector. This score is
in turn based on the importance of each type of selector (see Chapter 2 or the beginning of
this chapter for selector types), in the following order, from least important to most important:
1. Element selectors (including pseudo-element selectors)
2. Class selectors (including attribute and pseudo-class selectors)
3. ID selectors
4. Inline styles
Dizzy yet? Don't worry, it gets easier, and we'll take it slow. It's less difficult to understand how
browsers calculate specificity when you can see the results, so let's step through a few basic
examples showing progressively more specific rules (a commented version can be found in
ch3_specificity_basic.html in the Source Code/Download section for this topic at the Apress
web site), and then we'll compare the specificity and score of each selector side by side.
A Series of Basic Examples
Our guinea pigs for this process will be a pair of poor, unassuming h1 and p elements:
<h1>Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
Figure 3-6 shows the standard but boring result with Safari's default styles.
Figure 3-6. h1 and p using Safari's default styles
Let's start with some basic styles, using element selectors to assign colors to our text:
h1 {
p {
We've now styled our elements using the selectors with the lowest specificity—element
selectors—which also means they cast the widest net; any h1 or p elements in our markup will
use these styles. Figure 3-7 shows the result, which doesn't look any different from the default
rendering because we've used the same color as the browser default.
Search WWH ::

Custom Search