Przegląd pseudoklas został podzielony na pięć części:
- pseudoklasy akcji
- pseudoklasy struktury
- pseudoklasy pól formularzy
- pseudoklasy zaprzeczenia
- pozostałe
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}span
text
: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:
3 komentarze:
Wielkie dzięki za ten wpis - wszystko w jednym miejscu, z dobrymi przykładami :)
Na stronie http://www.beautifulcode.pl/webmaster/css/css-3-selektory/ jest tłumaczenie specyfikacji selektorów CSS 3
Prosto i z dobrym opisem.
Prześlij komentarz