Pseudoklasy w CSS

6 Komentarzy · Tagi: ,

The prefix pseudo- (from Greek ψευδής „lying, false”) is used to mark something as false, fraudulent, or pretending to be something it is not.

Źródło: Wikipedia.org

W wolnym tłumaczeniu, przedrostek „pseudo-” oznacza coś fałszywego, nieuczciwego lub udającego coś, czym w rzeczywistości nie jest. Tak samo jest w przypadku pseudoklas w CSS. Nie są to typowe klasy używane w tym języku.  Służą one jedynie do stylowania elementów, które nie są jawnie zawarte w strukturze pliku HTML.

Kaskadowe arkusze stylów są stale poszerzane o nowe pseudoklasy. Część z nich, opisana w tym artykule, została dodana dopiero w CSS3, co powoduje, że niektóre przeglądarki nie są jeszcze w stanie poprawnie ich interpretować.

Czym są pseudoklasy?

W CSS pseudoklasy są deklarowane przez poprzedzenie nazwy dwukropkiem. Opisują one elementy strony w różnych stanach (np. kiedy użytkownik najedzie na nie myszką). Najbardziej popularną pseudoklasą jest :hover, używany prawdopodobnie w każdej stronie internetowej.

a:hover { }

W powyższym przykładnie pseudoklasa została dodana do selektora <a>, ale równie dobrze można je dodawać do innych elementów.

Pseudoklasy stosowane przy linkach

:link – teoretycznie odnosi się do wszystkich linków na stronie, a przynajmniej wiele osób tak uważa. W praktyce jednak, oznacza on wszystkie elementy posiadające atrybut [href]

:visited – obowiązuje kiedy dany link został już wcześniej odwiedzony

:hover – oznacza stan, w którym użytkownik najechał myszą na link

:active – odnosi się do linków, które są aktywny w danym momencie. W przypadku użycia myszki oznacza to, że przycisk został naciśnięty i pozostaje wciśnięty. W przypadku poruszania się po stronie przy pomocy klawiatury, oznacza to, że aktualna pozycja tabulacji jest w miejscu tego linku

Istnieje niepisana reguła, że wszystkie 4 powyższe pseudoklasy powinny być zastosowane na stronie. Co więcej powinny być w kolejności pokazanej wyżej. Jest ciekawy sposób aby zapamiętać tę kolejność. Polega na zapamiętaniu pierwszej litery z każdego elementu, co daje nam LVHA –> LOVE HATE.

Pseudoklasy stosowane przy formularzach

:focus - element, na którym skupiona jest w danym momencie „uwaga”. Przykładowo kiedy wpisujesz w polu formularza wiadomość, to to pole może być ostylowane poprzez tę pseudoklasę

:target – ten element jest używany w połączeniu z atrybutem [id] i zostaje zastosowany w momencie, w którym hasz w obecnym adresie URL odpowiada temu atrybutowi. Dla przykładu jeśli adres jest www.strona.pl/#content, to pseudoklasa będzie odpowiadać elementowi o id #content.

:enabled – oznacza pola, które mogą być edytowane. Jest to stan domyślny

:disabled – oznacza pola, które nie mogą być edytowane, czyli są wyłączone

:checked – pasuje do czekboksów, które zostały zaznaczone

:indeterminate - używana przy elementach radio i checkbox, odpowiada stanowi, kiedy element formularza nie jest ani zaznaczony, ani niezaznaczony (np. w momencie kiedy strona została załadowana oraz żaden element nie został domyślnie zaznaczony)

:default – opisuje domyślne elementy formularza. Np. domyślny stan przycisku „submit”.

:required – odnosi się do wymaganych pól formularza

:optional – odnosi się do opcjonalnych pól formularza

Pseudoklasy oznaczające pozycję lub numer elementu

:root – oznacza element, który jest korzeniem dokumentu. Standardowo jest to element <html>

:first-child – odnosi się do elementu tylko wtedy, kiedy jest to pierwsze dziecko w elemencie rodzica (np. li:first-child {} oznacza pierwszy element z listy)

:last-child – odnosi się do elementu tylko wtedy, kiedy jest to ostatnie dziecko w elemencie rodzica (np. li:last-child {} oznacza ostatni element z listy)

:nth-child(N) – oznacza konkretny element w selektorze rodzica (np. li:nth-child(3) {} oznacza trzeci element z listy, li:nth-child(2n) {} wszystkie elementy parzyste w liście, li:nth-child(2n+1) {} wszystkie elementy nieparzyste w liście)

:nth-of-type(N) – pseudoklasa podobna do :nth-child, z tą różnicą, że oznacza ona elementy nie mające wspólnego rodzica. Przykładowo możemy użyć jej aby wybrać drugi paragraf z div’a (p:nth-of-type(2) {})

:first-of-type – oznacza pierwszy element w każdym selektorze rodzica. Jeśli np. mamy dla div’y z których każdy ma kilka paragrafów to div p:first-of-type {} będzie oznaczać pierwszy paragraf zarówno w pierwszym jak i w drugim div’ie

:last-of-type – podobnie jak wyżej, z tym, że odnosi się do ostaniego elementu

:nth-last-of-type(N) – działa jak :nth-of-type(N), ale elementy są liczone w odwrotnej kolejności (od ostatniego do pierwszego)

:nth-last-child(N) – działa jak :nth-child(N), ale elementy są liczone w odwrotnej kolejności (od ostatniego do pierwszego)

:only-of-type - obowiązuje dla elementu, który w danym rodzicu nie ma swojego odpowiednika

Pseudoklasy stosowane przy tekście

:first-letter – odnosi się do pierwszej litery tekstu w danym elemencie

:first-line – odnosi się do pierwszej linii tekstu w danym elemencie

::selection – pozwala na zmianę koloru zaznaczenia tekstu w danym elemencie. Dokładny opis tej pseudoklasy tutaj.

Inne pseudoklasy i pseudoelementy

:before() – pozwala na dodanie treści przed elementem. Często używane przy otwieraniu cudzysłowu w elemencie <blockquote>

:after() – pozwala na dodanie treści za elementem. Często używane przy zamykaniu cudzysłowu w elemencie <blockquote>

:empty – określa style elementu, który nie zawiera żadnej treści (np. <p></p>)

:not() – powoduje, że wybierane są elementy, które nie pasują do podanego wzorca. Przykładowo div:not(.klasa) będzie się odnosić do wszystkich div’ów, które nie posiadają klasy „klasa”

:read-only – odnosi się do elementów tylko do odczytu

:read-write – odnosi się do elementów, które mogą być edytowane

Łączenie pseudoklas

Możliwe jest też łączenie ze sobą kilku pseudoklas, aby otrzymać ciekawe efekty. Jednym z takich rozwiązań jest stylowanie pierwszej litery całego bloku tekstu poprzez wybranie pierwszego paragrafu (p:first-child) oraz pierwszej litery (p:first-letter). W połączeniu daje nam to:

p:first-child:first-letter {   }

A efekt wygląda następująco:

Czytaj dalej:

:first-child –

Podobał Ci się ten wpis? Subskrybuj kanał RSS aby być na bieżąco! Możesz również podzielić się nim ze znajomymi klikając jeden z przycisków poniżej!


Autor: Piotr Kulpiński

Dyskusja

6 komentarzy do tego wpisu

Trackbacki

Skomentuj wpis