Wracamy na stronę
z listami sławnych obrazów.

CSS zaczyna się od reguły rodziny
czcionek - wszędzie są bezszeryfowe.

Potem jest reguła selektorów grupowych.
Zmienia rodzinę czcionek w „h1” i „h2”.

Dalej - kilka reguł, których jeszcze
nie widzieliście. Wyglądają dziwnie.

Zaczynają się od „a”,
po nim jest dwukropek i słowo.

Co oznacza dwukropek?
Co wybierają te reguły?

Wszystko, co zaczyna się dwukropkiem,
nazywamy pseudoklasą.

Pseudoklasa wybiera elementy
wg informacji spoza strony

lub tam, gdzie nie da się
zastosować innych selektorów.

Tu użyję pseudoklas, by nadać styl
linkom zależnie od ich stanu.

Pseudoklasa „link” wybierze wszystkie
linki, na które użytkownik nie kliknął.

Większość przeglądarek
wyświetla je na niebiesko.

Pseudoklasa „visited” wybierze
wszystkie linki już kliknięte.

Większość przeglądarek
wyświetla je na fioletowo.

Jeśli naprawdę chcemy,
możemy zmienić kolory.

Niech to jednak będzie uzasadnione.

Ludzie już kojarzą błękit i fiolet
z linkami wykorzystanymi i nie.

Lubią też wiedzieć,
które strony odwiedzili.

Nie zmieniajcie tego
bez dobrego powodu.

Skasuję te dwie reguły.

Uważam, że lepiej
przy nich nie majstrować.

Następna reguła jest wesoła.
To „a:hover” (ang. unosić się).

Ta pseudoklasa wybierze element,
gdy użytkownik jeździ po nim myszką.

Tylko wtedy będą zastosowane
właściwości.

Przerwijcie filmik
i ponajeżdżajcie na linki myszką.

Proszę, ja zaczekam. Najedźcie…

Widzieliście, jak tło zmieniło kolor?
Świetny efekt!

Pseudoklasy „hover” można użyć
do każdego elementu.

Tylko że to nie działa
na każdym sprzęcie.

W komórce - nie, bo wyświetlacz
reaguje tylko na dotyk.

Świetnie jest mieć taki efekt,
ale nie polegajcie na nim.

Co z tymi dwiema regułami? 
Są podobne do „hover”,

zależne od tego, co akurat
robi użytkownik.

Pseudoklasa „active” wybiera
elementy aktywne.

Np. gdy użytkownik klika na link,
tuż przed zmianą strony.

Pseudoklasa „focus”
wybiera elementy zogniskowane,

np. gdy za pomocą klawiatury
poruszacie się po interfejsie.

Zatrzymajcie wykład, klikajcie linki,
poruszajcie się po stronie. Co będzie?

Widzieliście, że tło zmieniło kolor?

Wybrałam tę samą właściwość dla „hover”,
„active” i „focus”, bo robią to samo:

pozwalają użytkownikowi
zauważyć link.

Wielu projektantów właśnie dlatego
używa tu tych samych właściwości.

A gdybym chciała zmienić
kolor tego tła?

Mogę zmieniać każdy po kolei,

albo zrobić to,
czego się nauczyliśmy:

pogrupować selektory w jednej
regule, oddzielając je przecinkami.

Damy tu przecinek. Napiszmy
„a:active”, a potem „a:focus”.

Teraz mogę skasować te dwie
reguły i zmienić wszystko naraz. Ładnie.

To pierwsze pseudoklasy,
które pokazaliśmy, ale nie ostatnie.

Innych pseudoklas CSS
poszukajcie w Internecie,

albo zaczekajcie,
aż opowiemy wam więcej.