CSS Rules of Specificity

Question 1

1st Rule (Specificity: 1-0-1)

#outer a { background-color: red; }

Answer 1

outer → 1 ID → 1-0-0

Specificity Breakdown:

a → 1 Element → 0-0-1

Total: 1-0-1

Result: Sets <a> background to</a>

Applies to: All <a> tags inside #outer.</a>

Question 2

2nd Rule (Specificity: 2-0-1)

#outer #inner a { background-color: blue; }

Answer 2

outer → 1 ID → 1-0-0

Specificity Breakdown:

a → 1 Element → 0-0-1

Total: 2-0-1

Overrides previous b

Stronger than the first rule (higher specificity).

Question 3

3rd Rule (Specificity: 1-0-4)

#outer div ul li a { color: yellow; }

Answer 3

outer → 1 ID → 1-0-0

Specificity Breakdown:

div → 1 Element → 0-0-1

ul → 1 Element → 0-0-1

li → 1 Element → 0-0-1

a → 1 Element → 0-0-1

Total: 1-0-4

Sets text

Applies to: <a> inside li inside ul inside div inside #outer.</a>

Question 4

4th Rule (Specificity: 1-1-3)

#outer div ul .nav a { color: white; }

Answer 4

outer → 1 ID → 1-0-0

Specificity Breakdown:

div → 1 Element → 0-0-1

ul → 1 Element → 0-0-1

.nav → 1 Class → 0-1-0

a → 1 Element → 0-0-1

Total: 1-1-3

Applies to: <a></a>

Stronger than 1-0-4, so yellow is overridden by white.

Question 5

5th Rule (Specificity: 0-2-4)

div div li:nth-child(2) a:hover { border: 10px solid black; }

Answer 5

Specificity Breakdown:

div div → 2 Elements → 0-0-2

li:nth-child(2) → 1 Class-like pseudo-selector → 0-1-0

a:hover → 1 Class-like pseudo-selector + 1 Element → 0-1-1

Total: 0-2-4

Effect: When hovere

Effect: When hovere

Applies to: The second <li> inside two nested divs.

Question 6

6th Rule (Specificity: 0-2-3)

div li:nth-child(2) a:hover { border: 10px dashed black; }

Answer 6

Specificity Breakdown:

div → 1 Element → 0-0-1

li:nth-child(2) → 1 Class-like pseudo-selector → 0-1-0

a:hover → 1 Class-like pseudo-selector + 1 Element → 0-1-1

Total: 0-2-3

Applies to: The second <li>, but with one less div ancestor than the pre

Question 7

7th Rule (Specificity: 0-3-3)

div div .nav:nth-child(2) a:hover { border: 10px double black; }

Answer 7

Specificity Breakdown:

div div → 2 Elements → 0-0-2

.nav:nth-child(2) → 1 Class-like pseudo-selector + 1 Class → 0-2-0

a:hover → 1 Class-like pseudo-selector + 1 Element → 0-1-1

Total: 0-3-3

Effect: On

Applies to: The second .nav element inside two nested divs.

Question 8

Final Order of Rules (From Weakest to Strongest)

Answer 8

1-0-1 #outer a { background-color: red; }
2-0-1 #outer #inner a { background-color: blue; } (Overwrites Red)
1-0-4 #outer div ul li a { color: yellow; }
1-1-3 #outer div ul .nav a { color: white; } (Overwrites Yellow)
0-2-3 div li:nth-child(2) a:hover { border: 10px dashed black; }
0-2-4 div div li:nth-child(2) a:hover { border: 10px solid black; } (Overwrites Dashed)
0-3-3 div div .nav:nth-child(2) a:hover { border: 10px double black; } (Overwrites Solid)