CSS daje nam bardzo duże możliwości odnośnie formatowania wyglądu kontrolek HTML, ale czasem trzeba bardziej dokładnie określić wygląd niektórych z części elementu HTML. Może to być na przykład pierwsza litera w akapicie, pierwszy wiersz w akapicie pierwszy akapit w danym kontenerze div.
Pseudo-klasy.
Z pomocą przychodzą nam pseudo-klasy i pseudo-elementy. Pseudo-klasy pomagają nam na zmianę wyglądu elementu HTML np. po najechaniu na niego myszką, po kliknięciu na nim, jeżeli ma jakieś atrybuty (np.: lang, readonly), albo określony stan (np.: zaznaczony, wartość mieści się w przedziale)
Poniżej spis pseudo-klas i ich opis.
|
Selektor |
Przykład |
Opis |
|
:active |
a:active |
oznacza aktywowane hiperłącze – po kliknięciu, ale przed zwolnieniem guzika myszy |
|
:checked |
input:checked |
określa każdy zaznaczony element <input> |
|
:disabled |
input:disabled |
określa każdy nieaktywny element <input> |
|
:empty |
p:empty |
określa każdy element <p>, który nie ma elementów potomnych |
|
:enabled |
input:enabled |
określa każdy aktywny element <input> |
|
:first-child |
p:first-child |
określa każdy element <p> będący pierwszym elementem potomnym rodzica |
|
:first-of-type |
p:first-of-type |
określa każdy element <p> będący pierwszym elementem potomnym rodzica o typie <p> |
|
:focus |
input:focus |
określa element <input>, na którym skupił się użytkownik (kliknął, przeszedł klawiszem TAB, itd.) |
|
:hover |
a:hover |
określa hiperłącze na które został ustawiony kursor myszy |
|
:in-range |
input:in-range |
określa element <input>, którego atrybut value znajduje się w prawidłowym przedziale np. dla: <input type="number" min="5" max="10" value="7"> będzie to wartość od 5 do 10 |
|
:invalid |
input:invalid |
określa element <input>, który ma nieprawidłową wartość, patrz wyżej |
|
:lang(language) |
p:lang(it) |
określa każdy element <p>, którego atrybut lang rozpoczyna się od „it” |
|
:last-child |
p:last-child |
określa każdy element <p>, który jest ostatnim elementem rodzica, patrz :first-element |
|
:last-type-of |
p:last-type-of |
określa każdy element <p>, który jest ostatnim elementem rodzica i jest typu <p> |
|
:link |
a:link |
określa nieodwiedzone hiperłącze |
|
:not(selektor) |
:not(p) |
określa każdy inny element HTML, który nie jest <p> |
|
:nth-child(n) |
p:nth-child(2) |
określa każdy element <p>, który jest drugim elementem rodzica |
|
:nth-last-child(n) |
p:nth-last-child(2) |
tak jak wyżej tylko elementy liczone są od końca |
|
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
określa element <p>, który jest drugim od końca elementem <p> swojego rodzica |
|
:nth-of-type(n) |
p:nth-of-type(2) |
określa drugi element <p>, który jest drugim „dzieckiem” elementu rodzica i jest typu <p> |
|
:only-of-type |
p:only-of-type |
określa tylko i wyłącznie elementy <p> będące „dziećmi” rodzica |
|
:only-child |
p:only-child |
określa wszystkie elementy <p> będące dziećmi swojego rodzica |
|
:optional |
input:optional |
określa wszystkie elementy <input>, które nie mają atrybutu „required” |
|
:out-of-range |
input:out-of-range |
określa elementy <input>, których wartość wykracza poza określone wartości |
|
:read-only |
input:readonly |
określa elementy <input>, które mają określony atrybut „readonly” |
|
:read-write |
input:read-write |
określa wszystkie elementy <input>, które nie mają atrybutu „readonly” |
|
:required |
input:required |
określa wszystkie elementy <input>, które mają atrybut „required” |
|
:root |
root |
określa główny korzeń dokumentu |
|
:target |
#news:target |
określa aktywny w tym momencie element o id #news, ale tylko w chwili kliknięcia hiperłącza odnoszącego się do tego elementu |
|
:valid |
input:valid |
określa wszystkie elementy <input> z poprawną wartością |
|
:visited |
a:visited |
określa hiperłącza, które zostały już odwiedzone |
Pseudo-klasy i hiperłącza
Aby hiperłącza były prawidłowo wyświetlane używając pseudo-klas: :hover, :link, :visited, :active to należy style odpowiednio poukładać. Prawidłowa kolejność to:
a:link{}
a:visited{}
a:hover{}
a:active{}
Nie trzeba określać wszystkich pseudo-klas hiperłącza. Najczęściej wystarczy określić wygląd:
a{}
a:hover{}
Pseudo-elementy
Pseudo-elementy określają część elementów HTML. Tymi częściami są: piersza litera, pierwszy wiersz, zaznaczenie, wstawka przed elementem, wstawka po elemencie.
Spis pseudo-elementów i ich opis
|
Selektor |
Przykład |
Opis |
|
::after |
p::after |
do umieszczania jakiejś zawartości po każdym elemencie <p> |
|
::before |
p::before |
do umieszczania jakiejś zawartości przed każdym elementem <p> |
|
::first-letter |
p::first-letter |
określa pierwszą literę każdego elementy <p> |
|
::first-line |
p::first-line |
określa pierwszą linię tekstu każdego elementu <p> |
|
::selection |
p::selection |
określa w jaki sposób wyświetlać zaznaczony przez użytkownika obszar |