Pseudoklasy CSS3

CSS w wersji 2 oferował zaledwie kilka, ale jakże przydatnych pseudoklas dla różnych znaczników stron. CSS3 zdecydowanie rozszerza te możliwości dzięki czemu mamy większą kontrolę nad elementami, co pozwala nam zaoszczędzić w kodzie szablonu oraz dodawania dodatkowych klas, a także używania JavaScriptu. Oto krótki przegląd pseudoklas dostępnych w CSS3.


Przegląd pseudoklas został podzielony na pięć części:

Przykłady są prezentowane na następującym kodzie HTML:
<div class="example-links">
   <a href="#"></a>
   <div></div>
   <div></div>
   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>
</div>
Predefiniowane CSS to:
div.example-links a, div.example-links div {
   display:block; 
   width:50px;
   height:50px;
   background:#eeaaaa; 
   border:solid 2px #ee0000; 
   float:left; 
   margin-right: 7px;
}
div.example-links div {
   border:solid 2px #ee6666;
}

Pseudoklasy akcji (:hover, :focus, :link, :visited)

:hover

Jest uruchamiana w momencie najechania na jakiś element (w JS zdarzenie onmouseover).
.example-links *:hover {background-color:yellow}

:focus

Odnosi się do aktywnego elementu (zgodnie ze specyfikacją - akceptującego zdarzenia z klawiatury lub myszy) - z reguły są to pola formularza.
.example-links *:focus {background-color:yellow}


:link

Odwołuje się do nieklikniętego (nieodwiedzonego) linku.

.example-links a:link {background-color:yellow}


:visited

Odwołuje się do odwiedzonego linku.

.example-links a:link {background-color:yellow}


:active

Wywołuje się w momencie, kiedy link zostanie kliknięty (np. myszą). Przydatne w momencie, kiedy link ma formę przycisku - wówczas możemy zastosować tutaj efekt wciśnięcia.





Pseudoklasy struktury (:nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, ...)

Odwołania do dzieci

Odwołania do dzieci elementów stają się bardzo przydatne w momencie, kiedy chcemy odnieść się do tych elementów bez względu na typ jaki prezentują. Mogą to być zarówno warstwy, linki czy formularze.

Należy jednak pamiętać, że dodatkowe filtrowanie po typie (np. div:first-child) spowoduje, że jeżeli pierwszym dzieckiem nie będzie div wówczas styl nie zostanie w ogóle nadany. Do nadawania stylu do pierwszego elementu typu służą odwołania do typów.
:nth-child()
Parametrem dla tej pseudoklasy jest struktura (an+b). Pierwsza część równania odpowiada częstotliwości powtarzania (jeśli podamy 1 to każdy element zostanie dopasowany, jeżeli 2 to co drugi itd.). Parametr b oznacza od którego elementu powinien zacząć. Oczywiście może on przyjąć wartość 0, wówczas oznaczanie elementów rozpoczyna się od drugiego elementu (oznakowanie elementów zaczyna się od 1, w przeciwieństwie do tablic elementów stosowanych w językach programowania, gdzie pierwszy element ma indeks 0).

.example-links *:nth-child(2n) {background-color:yellow}


.example-links a:nth-child(3n+1) {background-color:yellow}


Istnieje też możliwość wpisania wartości even zamiast 2n+1 (parzysty) oraz odd zamiast 2n (nieparzysty).

.example-links a:nth-child(even) {background-color:yellow}


Stosując tę pseudoklasę możemy odnieść się także do konkretnego elementu - np. piątego elementu wówczas pomijamy pierwszą sekcję z literką n np. a:nth-child(5).

.example-links a:nth-child(1) {background-color:yellow}


:nth-last-child()
Pseudoklasa nth-last-child różni się od nth-child tym, że elementy zliczane są od końca. Taka sytuacja jest bardzo korzystna, kiedy chcemy zaznaczyć kilka elementów od końca. Dostępne konstrukcje są takie same jak w przypadku nth-child - zarówno konstrukcja an+b oraz even i odd.

.example-links a:nth-last-child(2n+1) {background-color:yellow}


.example-links a:nth-last-child(2) {background-color:yellow}


:first-child
Jak sama nazwa wskazuje ta klasa odpowiada za dopasowanie pierwszego elementu - jest równoznaczna z zapisem :nth-child(1).

.example-links a:first-child {background-color:yellow}


:last-child
Jak sama nazwa wskazuje ta klasa odpowiada za dopasowanie ostatniego elementu - jest równoznaczna z zapisem :nth-last-child(1).

.example-links a:last-child {background-color:yellow}


:only-child
Pseudoklasa :only-child jest aktywna na obiekcie wówczas, kiedy jest on jedynym dzieckiem w elemencie nadrzędnym. Poniżej dwa przykłady - w jednym mamy standardowy zestaw kwadratów, zaś w drugim zostawiony został tylko jeden (i wówczas styl jest nadawany).

.example-links a:only-child {background-color:yellow}



Odwołania do typu

Tak jak zostało wcześniej wspomniane odwołania do typu pozwalają odnosić się bezpośrednio do typów obiektów, co pozwala zaznaczać kolejne obiekty z określonego typu.
:nth-of-type()
Podobnie jak w przypadku wybierania elementów przy użyciu :nth-child możemy tutaj stosować konstrukcję an+b lub even lub odd.

.example-links a:nth-of-type(2n) {background-color:yellow}

Podświetlenie elementów z każdego typu spowoduje zaznaczenie drugiego elementu zarówno z grupy <span> jak i <a>.

.example-links *:nth-of-type(2) {background-color:yellow}


Należy pamiętać, że grupy obiektów odnoszą się jedynie do tagów a nie ich klas. Więc w przypadku, kiedy nadamy drugiemu elementowi klasę a1, zaś w CSS odniesiemy się do klasy a2 wówczas styl nie zostanie nadany.

.example-links a.a1:nth-of-type(2) {background-color:yellow}


:nth-last-of-type()
Różnica pomiędzy tą pseudoklasą a nth-of-type ogranicza się do naliczania elementów od tyłu, co umożliwia wyznaczenie elementów licząc od końca.

.example-links a:nth-last-of-type(2n) {background-color:yellow}


.example-links *:nth-last-of-type(2) {background-color:yellow}


:first-of-type
Alias do :nth-of-type(1). Zaznacza pierwszy element z danego typu.
.example-links a:first-of-type {background-color:yellow}


:last-of-type
Alias do :nth-last-of-type(1). Zaznacza ostatni element z danego typu.
.example-links *:last-of-type {background-color:yellow}



:only-of-type
Style przypisane do tej klasy są nadawane elementowi jedynie wówczas, kiedy węzeł nadrzędny zawiera tylko jeden element z wyznaczonej grupy.

.example-links a:only-of-type {background-color:yellow}




Pseudoklasy pól formularzy (:enabled, :disabled, :checked)


W tym rozdziale przykładowy kod HTML zostanie zamieniony na prosty formularz:
<form>
   <fieldset>
      <input type="text" />
      <input type="checkbox" />
      <input type="radio" />
   </fieldset>
   <fieldset>
      <input type="text" disabled="disabled" />
      <input type="checkbox" disabled="disabled" />
      <input type="radio" disabled="disabled" />
   </fieldset>
   <fieldset>
      <input type="text" />
      <input type="checkbox" checked="checked" />
      <input type="radio" checked="checked" />
   </fieldset>
</form>


:enabled

Nadaje style dostępnym polom.
form input:enabled {border:solid 2px red;background: yellow}









:disabled


Nadaje style polom zablokowanym.
form input:disabled {border:solid 2px red;background: yellow}








:checked


Nadaje style polom zaznaczonym (checkbox, radio). Myślę, że dużo bardziej użyteczne w powiązaniu z innymi selektorami CSS3 jak np. + czy ~ odwołujących się do sąsiadujących węzłów.

form input:checked + label {border:solid 2px red;background: yellow}








Pseudoklasa zaprzeczenia (:not)


Klasa zaprzeczenia jak sama nazwa wskazuje wyklucza elementy podane w parametrze. Składania tych elementów jest identyczna jak w przypadku stylów CSS, więc możemy także dodatkowo używać pseudoklas. Można ją łączyć z innymi pseudoklasami.

.example-links *:nth-child(2n+1):not(div) {background-color:yellow}


.example-links *:nth-child(2n+1):not(*:first-of-type) {background-color:yellow}


Pozostałe pseudoklasy (:root, :empty, :target, :lang)

W tym dziale postanowiłem umieścić elementy, które nie pasowały mi do innych działów, pomimo iż czasami W3C zgrupowała je razem z pozostałymi elementami (np. ze względu na powiązania funkcjonalne - odnoszenie się do struktury).

:root

Odnosi się do głównego elementu w strukturze drzewa. W przypadku stron HTML'owych jest to zawsze znacznik <html>.

:empty

Odnosi się do elementu, który nie zawiera żadnych innych węzłów.
Przykład przedstawia element pusty, element z węzłem <span>, element z węzłem tekstowym oraz element z komentarzem.

<div class="example-links">
   <div></div>
   <div><span>span</span></div>
   <div>text</div>
   <div><!-- comment --></div>
</div>

.example-links div:empty {background-color:yellow}



:target

Odnosi się do elementu na który wskazuje wartość zdefiniowana po znaku # w adresie URL strony. Pozwala to podkreślić element na który chcemy dokładnie wskazać.

Przykład: dopisz #example do adresu URL strony.
.example-links *:nth-child(2n+1):not(*:first-of-type) {background-color:yellow}


:lang


Odnosi się do elementów, które mają ustalony język. Co ciekawe elementy dziedziczą wartość dla :lang, więc jeżeli parametr lang został nadany na <body> wówczas do poszczególnych elementów możemy także odwoływać się bezpośrednio do elementów. Może to być niezwykle przydatne jeśli mamy elementy graficzne zawierające treść w różnych językach.

Poniższy przykład z definiowaniem flag opiera się na następującym kodzie HTML:
<div lang="pl">
   <div class="flag">
      <div></div>
      <div></div>
      <div></div>
   </div>
</div>
<div lang="fr">
   <div class="flag">
      <div></div>
      <div></div>
      <div></div>
   </div>
</div>
<div lang="be">
   <div class="flag">
      <div></div>
      <div></div>
      <div></div>
   </div>
</div>
<div lang="es">
   <div class="flag">
      <div></div>
      <div></div>
      <div></div>
   </div>
</div>

Oraz definicji flag dla osobnych języków:
.flag {width:100px;height:75px; border: solid 1px #ccc;float:left;}
.flag:lang(pl) div:nth-child(1) {background:white; height:50%}
.flag:lang(pl) div:nth-child(2) {background:red; height:50%}
.flag:lang(pl) div:nth-child(3) {display:none;}

.flag:lang(fr) div {width:33%;height:100%;float:left;}
.flag:lang(fr) div:nth-child(1) {background:blue; }
.flag:lang(fr) div:nth-child(2) {background:white; }
.flag:lang(fr) div:nth-child(3) {background:red; }

.flag:lang(es) div:nth-child(2n+1) {background:red; height:25%}
.flag:lang(es) div:nth-child(2) {background:yellow; height:50%}

.flag:lang(be) div {width:33%;height:100%;float:left;}
.flag:lang(be) div:nth-child(1) {background:black; }
.flag:lang(be) div:nth-child(2) {background:yellow; }
.flag:lang(be) div:nth-child(3) {background:red; }


Podsumowanie


CSS3 wprowadzają dużo większe możliwości do ostylowania elementów, co z kolei pozwala odchudzić nam logikę zawartą w szablonach (chociażby parzysty, nieparzysty) i przyspieszyć kodowanie. Jednocześnie dodanie sporej ilości pseudoklas to dopiero początek tego co oferuje nowa wersja styli, więc zachęcam do samodzielnego zapoznania z możliwościami najnowszej wersji CSS.

A na koniec dwa przydatne linki:


 

Prześlij dalej:

3 komentarze:

singles pisze...

Wielkie dzięki za ten wpis - wszystko w jednym miejscu, z dobrymi przykładami :)

Anonimowy pisze...

Na stronie http://www.beautifulcode.pl/webmaster/css/css-3-selektory/ jest tłumaczenie specyfikacji selektorów CSS 3

Rafał Michalski pisze...

Prosto i z dobrym opisem.

Prześlij komentarz