Specificity and the Cascade - Pro CSS Techniques - page 42

div.module h1 {
color:#666;
}
div.module p {
color:#666;
}
Our newest page output is shown in Figure 3-9.
Figure 3-9. Our new selector only targets the <div class="module"> , ignoring the others.
For our fourth pair, let's add an ID to the div , and another set of rules with more specific
selectors to our style sheet. Even though the class remains on the div , the new selectors are
more specific due to the ID (which is more important than elements and classes, as noted at
the beginning of this example), and thus override the other rules (see Figure 3-10):
Markup
<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>
<div>
<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>
</div>
<div class="module">
<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>
</div>