Lesson 8: Mastering CSS Precedence Rules

Understanding CSS Precedence

CSS precedence determines which styles get applied when multiple rules target the same element. The browser follows a specific order to resolve conflicts:

1. !important Declaration

2. Specificity

3. Source Order

!important: Overrides all other rules regardless of specificity or source order.

Specificity: More specific selectors take precedence over less specific ones.

Source Order: When specificity is equal, the last rule defined takes precedence.

Source Order (Sequential Rule)

When multiple rules with equal specificity target the same element, the last rule in the CSS source order takes precedence.

Example: Conflicting Styles

Code

Demo

/* First rule */
h2 {
  color: red;
  text-decoration: underline;
}

/* Second rule - this will take precedence */
h2 {
  color: blue;
  text-decoration: none;
}

This heading will be blue without underline

Even though the first rule set the text to red with underline, the second rule takes precedence because it comes later in the source order.

Practical Tip: When debugging styles, check if conflicting rules are defined later in your CSS. This is often the cause of unexpected styling behavior.

Specificity Rule

Specificity is a weight that determines which CSS rule is applied when multiple rules could target the same element. Each selector type has a different weight:

Inline Styles

(1,0,0,0)

ID Selectors

(0,1,0,0)

Classes, Attributes, Pseudo-classes

(0,0,1,0)

Elements, Pseudo-elements

(0,0,0,1)

Specificity Calculation

Selector Specificity Calculation p (0,0,0,1) 1 element selector .intro (0,0,1,0) 1 class selector #header (0,1,0,0) 1 ID selector nav ul li a.active (0,0,1,4) 4 elements + 1 class #main .content p:first-child (0,1,2,1) 1 ID + 2 classes + 1 element

Specificity in Action

Which style will win?

!important Rule

The !important declaration overrides all other rules regardless of specificity or source order. It should be used sparingly as it can make CSS difficult to maintain.

Syntax

selector {
  property: value !important;
}

Example: !important Override

Code

Demo

#important-demo {
  color: blue;
}

.special-text {
  color: red !important;
}

This text is red because of !important

Even though the ID selector has higher specificity, the !important declaration wins.

Best Practice: Avoid using !important whenever possible. Instead, increase specificity naturally by adding classes or restructuring your HTML/CSS.

Precedence Comparison

Understanding how precedence rules interact is crucial for effective CSS development.

Scenario	Winning Rule	Reason
Inline style vs ID selector	Inline style	Inline styles have higher specificity (1,0,0,0)
ID selector vs class selector	ID selector	IDs (0,1,0,0) beat classes (0,0,1,0)
Class selector vs element selector	Class selector	Classes (0,0,1,0) beat elements (0,0,0,1)
Equal specificity, different source order	Last defined rule	Source order determines precedence
Normal rule vs !important rule	!important rule	!important overrides all other rules

Interactive Precedence Demo

Test the precedence rules

Current applied styles: None

Practical Applications

Understanding precedence rules helps resolve common styling challenges:

Framework Overrides

Override CSS framework styles with appropriate specificity rather than !important.

Theming Systems

Create themeable interfaces where base styles can be overridden by more specific theme classes.

Responsive Design

Ensure media queries have sufficient specificity to override base styles.

Debugging CSS

Quickly identify why certain styles aren't applying by examining specificity.

Real-world Example: Theming System

/* Base button style */
.btn {
  padding: 10px 20px;
  border-radius: 4px;
  background: #eee;
  color: #333;
}

/* Theme-specific overrides */
.theme-dark .btn {
  background: #333;
  color: #fff;
}

/* High-priority button in dark theme */
.theme-dark .btn.primary {
  background: #0066cc !important;
}

The !important is only used for the highest-priority elements in specific contexts.

Best Practices

Follow these guidelines for effective CSS precedence management:

Avoid !important: Use it only as a last resort for overriding third-party CSS.

Use classes for styling: Classes have just the right specificity for most styling needs.

Keep specificity low: Lower specificity makes styles easier to override when needed.

Organize CSS logically: Place general styles first, overrides later in the source order.

Specificity Management Techniques

Technique	Implementation	Benefit
Class-based styling	`.btn-primary` instead of `#submit-button`	Predictable, reusable specificity
CSS methodologies	BEM, SMACSS, ITCSS	Systematic specificity management
CSS variables	`--primary-color: blue;`	Change values without increasing specificity
Cascade layers	`@layer base, components;`	Control source order of entire style sections

Next Steps

Now that you understand CSS precedence rules, continue to the next lesson to learn about CSS inheritance.

Previous Lesson Next Lesson: Inheritance