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 1

Given the following document markup, the following process determines the final set of declarations which apply the numbered element [1] below. Considering the specificity of selectors, possible inheritance, and the effects of inline styles, the final set of declarations which apply to [1] 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;">[1]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">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 1 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 yes
(from parent)
3 div This selects selects any div element. no yes
(from parent)
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. yes no
7 div#content This selects any div element with an #ID that equals content. no yes
(from parent)
8 *#content p This selects any p element that is a descendant of any element with an #ID that equals content. yes no
9 inline style This selects an inline p yes no

Disregard the ones that don't match. These styles remain:

Rule# Selector Meaning Does it match? Is it inherited?
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 yes
(from parent)
3 div This selects selects any div element. no yes
(from parent)
6 div[id] p This selects any p element that is a descendant of a div element with an id attribute. yes no
7 div#content This selects any div element with an #ID that equals content. no yes
(from parent)
8 *#content p This selects any p element that is a descendant of any element with an #ID that equals content. yes no
9 inline style This selects an inline p yes no

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

2.a For normal declarations, author style sheets override user style sheets which override the default style sheet.

Rule# Selector author user
2 h1[id|="pg"] + * + div yes no
3 div yes no
6 div[id] p yes no
7 div#content yes no
8 *#content p no no
9 inline style yes no

2.b. For !important declarations, user style sheets override author style sheets which override the default style sheet.

Rule# Selector !important
author
!important
user
2 h1[id|="pg"] + * + div no no
3 div {font-weight: bold;} no no
6 div[id] p {font-weight: normal;} no no
7 div#content no no
8 *#content p no no
9 inline style no no

2.c. !important declaration override normal declarations.

Rule# Selector !important normal
2 h1[id|="pg"] + * + div no no
3 div {font-weight: bold;} no no
6 div[id] p {font-weight: normal;} no no
7 div#content no no
8 *#content p no no
9 inline style no no

2.d. An imported style sheet has the same origin as the style sheet that imported it.

Rule# Selector imported
2 h1[id|="pg"] + * + div no
3 div {font-weight: bold;} no
6 div[id] p {font-weight: normal;} no
7 div#content no
8 *#content p no
9 inline style no

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 #2
h1[id|="pg"] + * + div

This selects any div element that immediately follows (is sibling to) any element that immediately follows (is sibling to) a h1 element with an id attribute that equals pg or begins with pg-.

A div element that matches this selector is the parent of the target so the specificity of inherited values comes into play.

Inherited values don't have a specificity of 0. They don't have any specificity at all.-Eric Meyer 21.1.1

Specificity = none
Rule #3
div {font-weight: bold;}

This selects any div element.

A div element that matches this selector is the parent of the target so the specificity of inherited values comes into play.

Inherited values don't have a specificity of 0. They don't have any specificity at all. - Eric Meyer 21.1.1

Specificity = none
Rule #6
div[id] p

This selects any p element that is a descendant of a div element with an id attribute.

  1. #ID = 0
  2. Other attributes & pseudo-classes = 1
    [id]
  3. Element names = 2
    div element
    p element
Specificity = 0-1-2
Rule #7
div#content

This selects any div element with an #ID that equals content.

A div element that matches this selector is the parent of the target so the specificity of inherited values comes into play.

Inherited values don't have a specificity of 0. They don't have any specificity at all. - Eric Meyer 21.1.1

Specificity = none
Rule #8
*#content p

This selects any p element that is a descendant of any element with an #ID that equals content.

  1. #ID = 1
    #content
  2. Other attributes & pseudo-classes = 0
  3. Element names = 1
    p element
    (universal selector * ignored)
Specificity = 1-0-1
Rule #9
<p style="font-weight: bold; font-style: italic;">

In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, but for the purpose of step 3 of the cascade algorithm, they are considered to have an ID selector (specificity: a=1, b=0, c=0). 6.4.3 Calculating a selector's specificity

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

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

Specificity Rule# Selector color: background: font-weight: font-style: border: padding:
none
(inherited)
2

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

#333   normal      
none
(inherited)
3 div     bold      
none
(inherited)
7 div#content black yellow     1px solid
brown
non-standard
color
name
0.5em
0-1-2 6 div[id] p     normal      
1-0-0 9
inline style
inline style     bold italic    
1-0-1 8 *#content p       normal    

4. Do a final sort (by order specified)

If two rules have the same:

the latter specified wins.

Specificity Rule# Selector color: background: font-weight: font-style: border: padding:
none
(inherited from parent)
2 h1[id|="pg"] + * + div #333   normal      
none
(inherited from parent)
3 div     bold      
none
(inherited from parent)
7 div#content black yellow     1px solid
brown
non-standard
color
name
0.5em
0-1-2 6 div[id] p     normal      
1-0-1 8 *#content p       normal    
1-0-0 9
inline style
after all other rules
inline style     bold italic    
The winner black yellow
[note]
bold italic border
doesn't inherit
padding
doesn't inherit

[note] Background properties are not inherited, but the parent box's background will shine through by default because of the initial 'transparent' value on 'background-color'. 14.2

5. The final set of declarations which apply