Przejdź do treści

CSS / Selektory pseudoklas

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak zmienić wygląd odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?

a:link { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd odwiedzonych odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?

a:visited { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd aktywnych elementów - np. odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?

selektor:active { cecha: wartość }

Zobacz więcej...

Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

selektor:hover { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd pola tekstowego formularza po wybraniu przez użytkownika?

selektor:focus { cecha: wartość }

Zobacz więcej...

W jaki sposób zmienić wygląd elementów, zawierających tekst w wybranym języku?

selektor:lang(język) { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd pierwszego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?

dziecko:first-child { cecha: wartość }
rodzic > dziecko:first-child { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd ostatniego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?

dziecko:last-child { cecha: wartość }
rodzic > dziecko:last-child { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd elementu dziecka, który nie ma braci?

dziecko:only-child { cecha: wartość }
rodzic > dziecko:only-child { cecha: wartość }

Zobacz więcej...

W jaki sposób zmienić wygląd tylko pierwszego elementu określonego typu?

selektor:first-of-type { cecha: wartość }
rodzic > dziecko:first-of-type { cecha: wartość }
selektor:last-of-type { cecha: wartość }
rodzic > dziecko:last-of-type { cecha: wartość }
selektor:only-of-type { cecha: wartość }
rodzic > dziecko:only-of-type { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd odnośników (odsyłaczy, linków) do etykiety (kotwica)?

selektor:target { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane (wyszarzone)?

selektor:disabled { cecha: wartość }
selektor:enabled { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane do zapisu?

selektor:read-only { cecha: wartość }
selektor:read-write { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd pól (kontrolek) formularza, które są zaznaczone?

selektor:checked { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd domyślnego przycisku formularza lub domyślnej opcji do wyboru?

selektor:default { cecha: wartość }

Zobacz więcej...

W jaki sposób zmienić sposób formatowania elementów, które nie zawierają żadnej treści?

selektor:empty { cecha: wartość }

Zobacz więcej...

W jaki sposób za pomocą CSS odnieść się do korzenia drzewa dokumentu?

:root { cecha: wartość }

Zobacz więcej...

Jak zmienić wygląd parzystych lub nieparzystych wierszy tabeli? Jak pokolorować co trzeci wiersz?

dziecko:nth-child(cykl)
rodzic > dziecko:nth-child(cykl)
dziecko:nth-last-child(cykl)
rodzic > dziecko:nth-last-child(cykl)
selektor:nth-of-type(cykl)
rodzic > dziecko:nth-of-type(cykl)
selektor:nth-last-of-type(cykl)
rodzic > dziecko:nth-last-of-type(cykl)

Zobacz więcej...

W jaki sposób zmienić wygląd wszystkich elementów z wyjątkiem podanych?

selektor:not(argument) { cecha: wartość }

Zobacz więcej...

Komentarze

Zobacz więcej komentarzy

Facebook