This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Cascade Example 3

Given the following document markup, the following process determines the final set of declarations which apply the numbered element [3] below. Considering the specificity of selectors, possible inheritance, and the effects of inline styles, the final set of declarations which apply to [3] is at the very end of this document.

<html>
<head>
<title>a document</title>
<style type="text/css">
*[id~="pg-title"] {color: navy;}
h1[id|="pg"] + * + div {font-weight: normal; color: #333;}
div {font-weight: bold;}
li:first-child {color: brown;}
li {color: maroon;}
div[id] p {font-weight: normal;}
div#content {background: yellow; color: black; border: 1px solid brown;
padding: 0.5em;}
*#content p {font-style: normal;}
</style>
</head>
<body>
<h1 id="pg-title">Page Title</h1>
<p>The lead paragraph.</p>
<div id="content">
<p>This is the content of the page.</p>
<p style="font-weight: bold; font-style: italic;">Allow me to
make my main point here.</p>
<p>Here's some supporting evidence:</p>
<ol style="color: gray;">
<li>point one</li>
<li>the second point</li>
<li>point the third</li>
</ol>
<p>And some wrap-up.</p>
</div>
<div id="footer">[3]copyright somebody</div>
</body>
</html>

The Cascade Ordering Process

  1. Find all rules that apply
  2. Do a primary sort
  3. Do a secondary sort
  4. Do a final sort
  5. The final set of declarations which apply

1. Find all rules that apply

Declarations apply if the associated selector matches the element in question for the target media type. Reference: Example 3 document tree.

Rule# Selector Meaning Does it match? Is it inherited?
1

*[id~="pg-title"]

 This selects any element with an id attribute that contains the word pg-title. no no
2

h1[id|="pg"] + * + div

 

 This selects any div element that immediately follows any element that immediately follows a h1 element with an id attribute that equals pg or begins with pg-. no no
3 div This selects selects any div element. yes no
4 li:first-child This selects any li element that is a first child. no no
5 li This selects any li element. no no
6 div[id] p This selects any p element that is a descendant of a div element with an id attribute. no no
7 div#content This selects any div element with an #ID that equals content. no no
8 *#content p This selects any p element that is a descendant of any element with an #ID that equals content. no no

Disregard the ones that don't match. This style remains:

Rule# Selector Meaning Does it match? Is it inherited?
3 div This selects selects any div element. yes no

2. Do a primary sort (of the remaining declarations by weight and origin).

All the same weight and origin (author). No "!important" declarations, no imports.)

3. Do a secondary sort (by specificity of selector)

3.a. Calculate Specificity

Examine and rate each selector.

  1. Count:
    1. #IDs in the selector.
    2. Other attributes & pseudo-classes in the selector.
      • [attributes]
      • .classes
      • pseudo classes =
        • :first-child
        • :link
        • :visited
        • :hover
        • :actice
        • :focus
        • :lang
    3. Element names in the selector.
      • Ignore the univeral selector *
      • Ignore pseudo-elements:
        • :first-letter
        • :first-line
        • :before
        • :after
  2. Concatenate the three numbers.
Rule #3
div {font-weight: bold;}

This selects selects any div element.

  1. #ID = 0
  2. Other attributes & pseudo-classes = 0
  3. Element names = 1
    div element
Specificity = 0-0-1

3. b. Sort by specific weight (lightest to heaviest)

Only one rule to consider.

Specificity Rule# Selector color: background: font-weight: font-style: border: padding:
0-0-1 3 div     bold      

4. Do a final sort (by order specified)

No rules confilct.

Specificity Rule# Selector color: background: font-weight: font-style: border: padding:
0-0-1 3 div     bold      
The winner     bold      

5. The final set of declarations which apply

div {font-weight: bold;}