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.