Selektory pseudoklas

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):

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

   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 tylko 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):

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

   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):

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

   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):

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

Przykład:

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

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

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 }

• Łączenie selektorów
• Czcionki

• Do góry
• Strona główna
• Drukuj rozdział