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.

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.

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

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.

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

2.c. !important declaration override normal declarations.

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

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

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

Rule #3

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

Rule #6

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

Rule #7

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

Rule #8

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)

Rule #9

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
   

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

4. Do a final sort (by order specified)

If two rules have the same:

• weight
• origin
• specificity

the latter specified wins.

• Rules that have the same weight, origin and specificity are sorted according to appearance in the style sheet (first to last) and put in the table below.
• Explicit styles override inherited styles.
• If two inherited rules match, the one from the closest ancestor that's had that property explicitly set takes precedence. ^21.2
• Inline "styles" are considered to be after all other rules.^6.4.3
• To find the way that the style will finally be rendered, the last value in a column cascades down to the "winner" row (unless the property 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

• div#content {background: yellow; color: black;}
• <p style="font-weight: bold; font-style: italic;">

---

© 1998-2024 Laura L. Carlson
Email: lcarlson@d.umn.edu
Department: Information Technology Systems and Services, University of Minnesota Duluth
Document Last Modified: 2002
Page URL: http:// www.d.umn.edu /~lcarlson/csswork/cascade/example1.html

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.