Specificity Spy

<h1 class="brand">Stegosaurus</h1>

h1 {
  color: red;
}

.brand {
  color: green;
}

<h1 class="brand">Stegosaurus</h1>

.brand {
  color: orange;
}

.brand {
  color: yellow;
}

<h1 id="brand">Stegosaurus</h1>

h1 {
  color: pink;
}

#brand {
  color: magenta;
}

<h1 class="brand brand-alt">Stegosaurus</h1>

.brand {
  color: green;
}

.brand-alt {
  color: limegreen;
}

<h1 class="brand-alt brand">Stegosaurus</h1>

.brand {
  color: lavender;
}

.brand-alt {
  color: indigo;
}

<h1 class="main-heading" id="brand">Stegosaurus</h1>

h1 {
  color: burlywood;
}

.main-heading {
  color: goldenrod;
}

#brand {
  color: chocolate;
}

<h1 class="main-heading" id="brand">Stegosaurus</h1>

h1 {
  color: gainsboro;
}

#brand {
  color: grey;
}

.main-heading {
  color: darkgrey;
}

<h1 class="brand">Stegosaurus</h1>

h1 {
  color: darkgreen;
}

.brand {
  color: darkolivegreen;
}

h1.brand {
  color: forestgreen;
}

<h1 class="brand brand-highlight">Stegosaurus</h1>

.brand {
  color: darkred;
}

.brand-highlight {
  color: lightcoral;
}

.brand.brand-highlight {
  color: firebrick;
}

<h1 class="brand">Stegosaurus</h1>

h1 {
  color: deepskyblue;
}

.barnd {
  color: lightskyblue;
}