Specificity and the Cascade - Pro CSS Techniques - page 41

Figure 3-8. The more specific selector only affects the tags wrapped in a div .
Now let's create a third instance of our h1 and p , this time assigning a class to the div and
adding a new, more specific rule to our CSS. Even though our third pair is contained within
a div , the addition of a class to the selector increases its specificity.
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>
CSS
h1 {
color:#000;
}
p {
color:#000;
}
div h1 {
color:#333;
}
div p {
color:#333;
}