Zasady specyficzności w CSS

W poprzednim przykładzie oba selektory były identyczne i miały ten sam priorytet. Oznacza to, że wygrywała ta właściwość, która została zapisana niżej.

Zdarzają się również sytuacje, gdy jednemu elementowi strony odpowiada kilka selektorów. W takim przypadku w przypadku konfliktu właściwości wygra bardziej specyficzny, czyli bardziej precyzyjny selektor. Przyjrzyjmy się zasadom specyficzności.

Zasada pierwsza

Klasa zawsze wygrywa z selektorem tagu:

html<p class="text">text</p>

cssp {
  color: red;
}
.text {
  color: green; /* zastosowany zostanie ten kolor */
}

Результат:

Zasada druga

Identyfikator zawsze wygrywa z klasą:

html<p id="elem" class="text">text</p>

css.text {
  color: red;
}
#elem {
  color: green; /* zastosowany zostanie ten kolor */
}

Результат:

Zasada trzecia

Przy równych warunkach wygrywa ten selektor, który ma więcej części. Na przykład, jeśli mamy dwa selektory tagów, wygra ten, który ma więcej tagów:

html<div>
  <p>text</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* zastosowany zostanie ten kolor */
}

Результат:

Jeśli dwa selektory klas, wygra ten, w którym określono więcej klas (jeśli tam będą selektory tagów, to nie mają one wpływu):

html<div class="block">
  <p class="text">text</p>
</div>

css.text {
  color: red;
}
.block .text {
  color: green; /* zastosowany zostanie ten kolor */
}

Результат: