Spezifität#

Die Spezifität ermittelt, wann wird welche Regel anhand der Selektoren ausgeführt!

<ul>
  <li class="list">Listelement 1</li>
  <li class="list">Listelement 2</li>
  <li class="list">Listelement</li>
</ul>

.list {
  color: gold;
}

 ul li {
  color: aqua;
}

Welche Farbe werden die li`s haben?

Dies kann anhand der Spezifität eines Selektors bestimmt werden. Dem gesamten Selektor kann anhand einer Berechnung ein Wert zugewiesen werden.

Je größer der Wert, desto größer die Spezifität. Die Regeln des Selektors mit dem höheren Wert werden ausgeführt.

Spezifität berechnen

/* class = 10 */
.list {
  color: gold;
}

/* ul (Element 1) + li (Element 1) = 2 */
ul li {
  color: aqua;
}

Der Selektor ul li hat eine Spezifikation von 2 und .list eine Spezifität von 10. .list wird ausgeführt, weil die Spezifität höher ist.