Szczegółowość selektorów

Sposób formatowania każdego elementu strony może być określony w kilku miejscach. O tym, jak ostatecznie będzie wyglądał wybrany element, decydują zasady kaskadowości stylów. Pozostaje jeszcze określenie ważności reguł stylów, znajdujących się w tym samym arkuszu CSS. Panuje tutaj dość intuicyjna zasada mówiąca, że bardziej szczegółowe selektory są ważniejsze.

1. Selektory identyfikatora mają pierwszeństwo przed innymi, nawet jeśli znajdują się na początku arkusza CSS. Im więcej identyfikatorów zawiera selektor, tym jest bardziej szczegółowy, a więc ważniejszy.

   Przykład

   Tekst przedstawionego poniżej akapitu będzie czerwony (red):

   📋 Zaznacz kod ▶ Edytuj na żywo

   <div id="kontener">
   	<p id="identyfikator">...</p>
   </div>

   📋 Zaznacz kod ▶ Edytuj na żywo

   div#kontener p#identyfikator { color: red }
   p#identyfikator { color: green }
   p { color: black }

2. Gdy rozpatrywane selektory nie zawierają żadnych identyfikatorów albo zawierają ich tyle samo, o ważności decyduje liczba użytych w regule klas, pseudoklas oraz atrybutów.

   Przykład

   Tekst przedstawionego poniżej akapitu będzie czerwony (red):

   📋 Zaznacz kod ▶ Edytuj na żywo

   <p class="klasa">...</p>

   📋 Zaznacz kod ▶ Edytuj na żywo

   p.klasa { color: red }
   p { color: black }

3. Gdy w rozpatrywanych selektorach zarówno liczba identyfikatorów jak i klas, pseudoklas oraz atrybutów jest identyczna, bardziej szczegółowy (ważniejszy) jest selektor, który posiada więcej elementów lub pseudoelementów.

   Przykład

   Tekst przedstawionego poniżej akapitu będzie czerwony (red):

   📋 Zaznacz kod ▶ Edytuj na żywo

   <div>
   	<p>...</p>
   </div>

   📋 Zaznacz kod ▶ Edytuj na żywo

   div p { color: red }
   p { color: black }

4. Gdy żaden z powyższych punktów nie pozwala określić, który selektor jest bardziej szczegółowy, ważniejsze będą te deklaracje, które zostaną umieszczone na końcu.

   Przykład

   Tekst, określonego poniżej akapitu, będzie czerwony (red):

   📋 Zaznacz kod ▶ Edytuj na żywo

   p { color: black }
   p { color: green; color: red }

Przykład

Tekst przedstawionego poniżej akapitu będzie czerwony (red):

📋 Zaznacz kod ▶ Edytuj na żywo

<div id="kontener">
	<p class="klasa">...</p>
</div>

📋 Zaznacz kod ▶ Edytuj na żywo

div#kontener p.klasa { color: lime }
div#kontener p.klasa { color: yellow; color: red }
#kontener p.klasa { color: green }
div#kontener p { color: olive }
#kontener p { color: teal }
div p.klasa { color: aqua }
p.klasa { color: blue }
.klasa { color: navy }
div p { color: purple }
p { color: fuchsia }
* { color: black }