Kaskada i specyficzność CSS

Kaskada CSS określa, która deklaracja stylu zostanie zastosowana, gdy kilka reguł dotyczy tego samego elementu i tej samej właściwości. Przeglądarka bierze pod uwagę m.in. źródło stylu, specyficzność selektora oraz kolejność zapisania reguł.

Specyficzność selektorów

Specyficzność oznacza „siłę” selektora. Im bardziej szczegółowy selektor, tym większy priorytet ma jego deklaracja.

Przykładowa kolejność od słabszych do silniejszych:

• selektor elementu, np. td
• selektor klasy, np. .komorka
• selektor identyfikatora, np. #wynik
• styl wpisany bezpośrednio w atrybucie style

Przykład

<style>
  td {
    padding: 30px;
  }
</style>

<td style="padding: 10px;">Anna</td>
<td>Ewa</td>

W tym przykładzie reguła td { padding: 30px; } dotyczy wszystkich komórek td. Jednak pierwsza komórka ma dodatkowo styl lokalny:

style="padding: 10px;"

Styl zapisany w atrybucie style ma wyższy priorytet niż zwykła reguła CSS z selektorem elementu. Dlatego:

• komórka Anna będzie miała padding: 10px,
• komórka Ewa będzie miała padding: 30px.

Ważne na egzaminie

Jeżeli w zadaniu występuje jednocześnie reguła w znaczniku <style> i styl lokalny w atrybucie style, to zwykle styl lokalny wygrywa. Wyjątkiem mogą być deklaracje z !important, ale tylko wtedy, gdy pojawiają się w kodzie.