Pseudoklasy
Pseudoklasy interfejsu
Pseudoklasy odnośników
a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}
Pseudoklasy linku muszą ZAWSZE występować w podanej kolejności!
:link
- odnośnik widnieje na stronie i czeka, aż go ktoś kliknie:visited
- użytkownik już wcześniej kliknął odnośnik:hover
- nad odnośnikiem znajduje się kursor:active
- odnośnik jest właśnie klikany (tj. przycisk myszy jest naciśnięty, ale nie został jeszcze puszczony)
Pseudoklasa :target
<a href="#more_info">Więcej informacji</a>
<h2 id="more_info">To tych informacji szukasz.</h2>
#more_info:target {background:#eee;}
Po kliknięciu na odnośnik, zmienia styl elementu docelowego.
Pseudoklasy formularzy
:required
- selektor pól opatrzonych atrybutem required:focus:invalid
- selektor pól zawierających nieprawidłowe wartości:focus:valid
- selektor pól zawierających poprawną wartość:enabled
- za pomocą tej pseudoklasy możemy formatować wygląd pól formularza, które są dostępne dla użytkownika strony:disabled
- tych pól, których edycja została wyłączona za pomocą atrybutudisabled="disabled"
:checked
- za pomocą tej pseudoklasy możemy kontrolować wygląd aktywnych pól formularza typu radio lub checkbox
Pseudoklasa :focus
input:focus {border:1px solid blue;}
Kiedy pole jest aktywne, zmienia się obramowanie.
Pseudoklasa placeholder
:-ms-input-placeholder
::-moz-placeholder
::-webkit-input-placeholder
::placeholder
Pseudoklasy strukturalne
Pseudoklasa :root
Pseudoklasa ta należy do grupy pseudoklas strukturalnych, za pomocą których możemy odwołać się do struktury dokumentu XHTML/HTML będącej poza zasięgiem klasycznych selektorów. Omawiana pseudoklasa odnosi się do korzenia struktury, którym w przypadku dokumentów XHTML/HTML jest element html
, i zawsze działa na cały dokument.
Pseudoklasa :empty
Odpowiada za formatowanie tych elementów, które nie posiadają swoich dzieci i nie zawierają innych elementów.
Pseudoklasa :not()
Wybiera elementy z wyłączeniem tych w nawiasie not()
. W poniższym przykładzie zostaną wybrane wszystkie elementy formularza oprócz suwaka.
Pseudoklasa ta w nawiasie zawiera argument, który jest selektorem prostym, np. może to być p. Następnie wymusza formatowanie tych elementów, które nie są argumentem zapisanym w nawiasie.
input:not([type="range"]), textarea, select
{
/* deklaracje */
}
Pseudoklasa :first-child i :last-child
ol.results li:last-child {color:blue;}
Zmienia styl pierwszego lub ostatniego potomka.
Pseudoklasa :nth-child(n)
Wybiera n-ty element, może być wykorzystywany do zwiększania czytelności listy.
:nth-child(n)
:only-child
:nth-last-child(n)
:nth-of-type(n)
:first-of-type
:last-of-type
:only-of-type
:nth-last-of-type(n)
Pseudoelementy
::first-letter
::first-line
::before
::after
e::first-letter {font-size:300%;}
e::first-line {font-variant:small-caps;}
<p class="age">25</p>
p.age::before {content: "Wiek: ";}
p.age::after {content: " lat.";}