Quiz: Specificity Battle

Test Your Cascade Intuition

Time to see if you really get the cascade. Each question presents conflicting CSS rules targeting the same element. Your job: determine which rule wins and why. Don't guess -- trace the cascade algorithm step by step: origin, specificity (ID, CLASS, ELEMENT), then source order.

If you get fewer than 4 out of 6, go back to the selectors and specificity lesson. If you get all 6? You understand the cascade better than most professional developers.

---

Question 1: Class vs Element Count

/* Rule A */
div.container div.wrapper div.card p span {
  color: red;
}

/* Rule B */
.card .text {
  color: blue;
}

The element is a <span class="text"> inside .card inside .wrapper inside .container.

---

Question 2: The :where() Surprise

/* Rule A */
:where(#sidebar) .link {
  color: blue;
}

/* Rule B */
a {
  color: red;
}

The element is <a class="link"> inside #sidebar.

---

Question 3: !important vs Inline Style

This one catches a lot of people.

/* In stylesheet */
.banner {
  background: red !important;
}

<div class="banner" style="background: blue;">

---

Question 4: Specificity Stacking

/* Rule A */
#nav .menu li a { color: green; }

/* Rule B */
#nav a.active { color: orange; }

/* Rule C */
a.menu-link.active { color: purple; }

The element is <a class="menu-link active"> inside <li> inside .menu inside #nav.

---

Question 5: The :is() Specificity Trap

This is the sneakiest one on this quiz.

/* Rule A */
:is(.card, #featured) p { color: red; }

/* Rule B */
.card p { color: blue; }

The element is <p> inside <div class="card"> (the element does NOT have id="featured").

---

Question 6: Cascade Layer vs Specificity

Okay, last one. And it tests whether you understand the newest addition to the cascade.

@layer base, components;

@layer base {
  #main .card .title {
    color: red; /* High specificity: (1, 2, 0) */
  }
}

@layer components {
  .title {
    color: blue; /* Low specificity: (0, 1, 0) */
  }
}

---

Scoring Guide