CSS Mastery

Interactive demo

Specificity and cascade visualizer

Compare selectors and see why source order, layers, and specificity should be treated as separate levers.

Live demo

Specificity and cascade visualizer

Open demo page
CSS used in this demo 
.tool {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.tool h1 {
  margin: 0;
  font-size: 2rem;
}

label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

input {
  min-height: 3rem;
  border: 2px solid #171717;
  border-radius: 6px;
  padding-inline: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.score {
  display: inline-grid;
  width: fit-content;
  min-width: 9rem;
  place-items: center;
  border: 2px solid #171717;
  border-radius: 8px;
  background: #f8e8e2;
  padding: 0.75rem 1rem;
  font-size: 2rem;
  font-weight: 800;
}

What this demo is for

Use this demo when an override fails and you need to separate selector weight from cascade order before making the selector stronger.

Try this

  • Type a selector with an ID and compare it with a selector made from classes and pseudo-classes.
  • Simplify a long descendant selector and watch whether the practical advice changes.
  • Use the score as a warning sign, then inspect source order and layer order before escalating specificity.

Related guides