WDD 231: Web Frontend Development I

W01 Learning Activity: CSS Specificity

Overview

CSS stands for Cascading Style Sheets. The term "cascade" represents the prioritization stack of the CSS rules that are applied to a specific element. When more than one rule targets an element, the browser picks the winner by importance, then specificity, then source order.

Prepare

Specificity is represented as a four-part numerical value that reflects the weight of a CSS rule based on the types of selectors used. The higher the specificity, the more precisely the rule targets an element, thereby determining which rule takes precedence when multiple rules apply.

This table maps the parts from highest specificity to the lowest.

The specificity value is calculated by counting the number of selectors in each category and assigning a value to each category. The values are then combined to form a four-part specificity value.

For example, the CSS rule selector #sub-menu .nav a:hover has a specificity value of 0 1 2 1 because it contains:

• 1 ID selector (#sub-menu) — 0 1 0 0
• 1 class selector (.nav) — 0 0 1 0
• 1 pseudo-class selector (:hover) — 0 0 1 0
• 1 element selector (a) — 0 0 0 1

Troubleshooting

Here are two recommendations to help you troubleshoot the application of CSS rules by selectors:

1. Use the browser's built-in DevTools Elements – Styles panel. As you inspect an element by clicking on the element name in the Elements panel, the applied CSS rules are displayed for you to analyze and toggle on and off to test.

   

2. Use a CSS specificity calculator to compare CSS selectors' specificity.

   Note that this calculator displays specificity as a three-part value (a b c), omitting the highest category used exclusively for inline styles. Inline styles have an implicit top-level specificity of (1 0 0 0), but since the calculator focuses on selectors written in stylesheets, this top-level value is not shown.

Here are some other specificity considerations:

• The universal selector * has no specificity — 0 0 0 0.
• Combinators add no specificity. The descendant div p, child div > p, and adjacent sibling div + p selectors are each 0 0 0 2 because they contain two element selectors.
• The :where() pseudo-class has zero specificity, while :is() and :not() take the specificity of their most specific argument.
• Declarations marked !important override normal declarations regardless of specificity.

  Using !important should be avoided because it can make debugging and maintaining CSS more difficult. It is better to use a more specific selector or to refactor the CSS.

Activity Instructions

1. Open this page in a new browser tab.
2. Open up the browser's DevTools.
3. In the Elements panel, select the first paragraph p.
4. Note in the Styles tab how many color declarations are applied to the paragraph. This is the CSS stack.
   How many colors are declared and part of this stack and why are they in this order?

   There are five (5) color declarations made for this element, ordered from the highest specificity to the lowest. (The browser's default color of black is not counted in this example.)

   1. blueviolet ➡️ inline CSS – 1 0 0 0
   2. peru ➡️ id embedded CSS – 0 1 0 0
   3. red ➡️ id external CSS – 0 1 0 0
   4. green ➡️ class external CSS – 0 0 1 0
   5. blue ➡️ element external CSS – 0 0 0 1

   Items 2 and 3 are both ID selectors with equal specificity. In that case source order decides: peru wins because the embedded <style> element comes after the link to the external stylesheet.

5. Use the online CSS specificity calculator to enter the selectors to verify the stack order.

   For example, the selector .myClass has a specificity value of 0 1 0 because it is a class selector.