ZAWODNIK

Pseudoklasy i pseudoelementy: hover, nth-child, first-letter, before

INF.03 · teoria
autor: redakcja · 08.09.2026
Pseudoklasy opisują stan i pozycję elementu (:hover, :visited, :nth-child, :checked), pseudoelementy formatują fragment, którego nie ma w kodzie HTML (::first-letter, ::before). Kolejność LVHA, zebra w tabeli i zapis z jednym albo dwoma dwukropkami. Lekcja 4.3 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: cssĆwicz dział: css
Pseu­do­kla­sa to do­pi­sek do se­lek­to­ra, który opi­su­je STAN albo POZYCJĘ ele­men­tu: wska­za­ny kur­so­rem, od­wie­dzo­ny, za­zna­czo­ny, drugi w ko­lej­no­ści. Pseu­do­ele­ment to do­pi­sek, który wska­zu­je FRAGMENT ele­men­tu nie­ist­nie­ją­cy w kodzie HTML: pierw­szą literę aka­pi­tu, pierw­szy wiersz tekstu albo treść do­sta­wio­ną przed za­war­to­ścią i po niej. W części pi­sem­nej wra­ca­ją py­ta­nia „która pseu­do­kla­sa for­ma­tu­je od­wie­dzo­ny od­no­śnik", „co zrobi tr:nth-child(even)", „jak sfor­ma­to­wać pierw­szą literę aka­pi­tu" i „w jakim ko­lo­rze będzie hi­per­łą­cze po po­wro­cie na stronę". W za­da­niu prak­tycz­nym arkusz pisze wprost „zmiana koloru tła wier­sza tabeli po na­je­cha­niu kur­so­rem", a listę oce­nia­nych po­le­ceń dla stylu CSS zwykle zamyka punkt z pseu­do­kla­są albo pseu­do­ele­men­tem.

Cztery stany od­no­śni­ka i ko­lej­ność LVHA

Od­no­śnik ma cztery stany, a każdy z nich ma własną pseu­do­kla­sę. :link obej­mu­je od­no­śnik jesz­cze nie­odwie­dzo­ny, :visited (od­wie­dzo­ny) ten, któ­re­go adres jest już w hi­sto­rii prze­glą­dar­ki, :hover (na­je­cha­nie) ten, nad którym stoi wskaź­nik myszy, a :active (ak­tyw­ny) ten w trak­cie na­ci­ska­nia przy­ci­sku myszy. Pseu­do­kla­sę do­pi­su­je się do se­lek­to­ra bez spacji, zaraz za nazwą znacz­ni­ka albo klasy: a:hover, tr:hover, li:hover.
a:link { color: DarkSlateGray; } a:visited { color: Purple; } a:hover { color: Tomato; } a:active { color: Red; }
Ko­lej­ność w ar­ku­szu nie jest ozdob­na. Wszyst­kie cztery reguły mają tę samą spe­cy­ficz­ność, więc przy od­no­śni­ku pa­su­ją­cym do dwóch z nich wy­gry­wa ta za­pi­sa­na NIŻEJ, tak jak opi­su­je lekcja o do­łą­cza­niu stylów i ka­ska­dzie. Gdy a:hover stoi przed a:visited, od­wie­dzo­ny od­no­śnik nie zmieni koloru po na­je­cha­niu, bo póź­niej­sza reguła :visited nad­pi­sze kolor usta­wio­ny dla na­je­cha­nia. Za­pa­mię­tu­je się to jako ko­lej­ność LVHA: :link, :visited, :hover, :active. Piąta pseu­do­kla­sa, :focus (uak­tyw­nie­nie), obej­mu­je ele­ment wy­bra­ny kla­wi­szem Tab albo klik­nię­ciem w pole for­mu­la­rza i wsta­wia się między :visited a :hover. W stanie :visited prze­glą­dar­ka po­zwa­la zmie­nić prak­tycz­nie tylko kolory, żeby strona nie od­czy­ta­ła z wy­glą­du od­no­śni­ków hi­sto­rii od­wie­dzin.
Pu­łap­ka: :hover znaczy „wskaź­nik myszy stoi nad ele­men­tem", a :active „ele­ment jest wła­śnie na­ci­ska­ny". Py­ta­nie o wy­róż­nie­nie ele­men­tu wska­zy­wa­ne­go kur­so­rem ma od­po­wiedź :hover, nigdy :active.

Pseu­do­kla­sy struk­tu­ral­ne: po­zy­cja wśród ro­dzeń­stwa

Pseu­do­kla­sa struk­tu­ral­na wy­bie­ra ele­ment po jego MIEJSCU wśród ele­men­tów ma­ją­cych tego samego ro­dzi­ca, bez do­kła­da­nia klas do kodu HTML. Dzięki temu zebrę w tabeli cen albo wy­róż­nie­nie pierw­szej po­zy­cji menu robi się w jednym miej­scu ar­ku­sza, a nie przez do­pi­sy­wa­nie class="parzysty" do co dru­gie­go wier­sza.
Pseu­do­kla­sa
Wy­bie­ra
:first-child
ele­ment będący pierw­szym dziec­kiem swo­je­go ro­dzi­ca
:last-child
ele­ment będący ostat­nim dziec­kiem
:nth-child(2)
drugie dziec­ko, licząc od 1
:nth-child(odd)
dzieci nie­pa­rzy­ste, czyli 1, 3, 5, 7
:nth-child(even)
dzieci pa­rzy­ste, czyli 2, 4, 6, 8
:nth-child(3n)
co trze­cie dziec­ko, czyli 3, 6, 9
:nth-of-type(2)
drugi ele­ment tego samego typu wśród ro­dzeń­stwa
:not(.promocja)
każdy ele­ment poza pa­su­ją­cym do zapisu w na­wia­sie
nav li:first-child { font-weight: bold; } tbody tr:nth-child(even) { background-color: #f2f2f2; } tbody tr:nth-child(3n) { border-bottom: 1px solid #222; } article p:not(.uwaga) { color: #222; }
Li­cze­nie za­czy­na się od 1, więc even to wiersz drugi, czwar­ty i szósty, a odd to pierw­szy, trzeci i piąty. Druga rzecz do spraw­dze­nia w py­ta­niu: :nth-child liczy WSZYSTKIE dzieci ro­dzi­ca, a nie tylko te pa­su­ją­ce do znacz­ni­ka sto­ją­ce­go przed dwu­krop­kiem. Zapis p:nth-child(2) znaczy „akapit, który jest drugim dziec­kiem swo­je­go ro­dzi­ca", więc gdy drugim dziec­kiem jest na­głó­wek, nie za­dzia­ła nic. p:nth-of-type(2) pomija ro­dzeń­stwo innych typów i trafia w drugi akapit nie­za­leż­nie od tego, co stoi między aka­pi­ta­mi. Tak samo li:first-child to pierw­szy punkt KAŻDEJ listy na stro­nie, bo każda lista jest osob­nym ro­dzi­cem.

Pseu­do­kla­sy for­mu­la­rza

Pseu­do­kla­sy for­mu­la­rza opi­su­ją stan kon­tro­l­ki: za­zna­cze­nie, blo­ka­dę i wynik spraw­dze­nia wpi­sa­nej war­to­ści. Dzięki nim błędne pole pod­świe­tla się bez jednej linii JavaScriptu, bo prze­glą­dar­ka sama zna reguły wa­li­da­cji HTML5 z lekcji o for­mu­la­rzach.
input:required { border: 1px solid DarkSlateGray; } input:invalid { border: 1px solid Tomato; } input:focus { background-color: #f4f4f4; } input:disabled { color: #999999; }
:checked (za­zna­czo­ny) obej­mu­je za­zna­czo­ne pole wyboru i wy­bra­ny przy­cisk opcji, :disabled (wy­łą­czo­ny) kon­tro­l­kę z atry­bu­tem disabled, :required (wy­ma­ga­ny) pole z atry­bu­tem required, a :valid (po­praw­ny) i :invalid (błędny) pole od­po­wied­nio speł­nia­ją­ce i ła­mią­ce swoje reguły, czyli zakres min i max, typ email albo wzo­rzec pattern. Pole wy­ma­ga­ne i puste jest błędne od razu po wczy­ta­niu strony, więc ramka z :invalid po­ja­wia się, zanim kto­kol­wiek za­cznie pisać. Pod­świe­tle­nie jest pod­po­wie­dzią dla użyt­kow­ni­ka, a nie za­bez­pie­cze­niem: dane spraw­dza się jesz­cze raz po stro­nie ser­we­ra.

Pseu­do­ele­men­ty i zapis z dwoma dwu­krop­ka­mi

Pseu­do­ele­ment for­ma­tu­je frag­ment ele­men­tu, któ­re­go w kodzie HTML nie ma, albo do­sta­wia do ele­men­tu treść, której autor strony nie na­pi­sał. Ta­kie­go frag­men­tu nie da się wska­zać zwy­kłym za­pi­sem z lekcji o se­lek­to­rach, bo pierw­sza litera aka­pi­tu nie jest osob­nym znacz­ni­kiem.
Pseu­do­ele­ment
Co for­ma­tu­je
::first-letter
pierw­szą literę bloku tekstu, czyli ini­cjał
::first-line
pierw­szy wy­świe­tlo­ny wiersz, zmien­ny przy zwę­że­niu okna
::before
treść do­sta­wio­ną przed za­war­to­ścią ele­men­tu
::after
treść do­sta­wio­ną po za­war­to­ści ele­men­tu
::selection
frag­ment za­zna­czo­ny przez użyt­kow­ni­ka
::placeholder
pod­po­wiedź wi­docz­ną w pustym polu for­mu­la­rza
article p::first-letter { font-size: 400%; color: DarkSlateGray; } article p::first-line { font-weight: bold; } h2::before { content: "// "; color: Tomato; }
::before i ::after wy­ma­ga­ją wła­ści­wo­ści content (treść): bez niej nie po­wsta­je nic, a war­to­ścią bywa napis w cu­dzy­sło­wie, pusty napis content: "" przy samym ozdob­ni­ku gra­ficz­nym albo obraz wska­za­ny za­pi­sem url(). Do­sta­wio­na treść nie trafia do kodu strony, więc wy­szu­ki­war­ka i czyt­nik ekranu mogą ją po­mi­nąć: idą tam ozdob­ni­ki, jed­nost­ki i numery, nigdy zdanie ważne dla czy­tel­ni­ka. ::first-letter i ::first-line dzia­ła­ją wy­łącz­nie na ele­men­tach blo­ko­wych, czyli na aka­pi­cie i na­głów­ku, a nie na od­no­śni­ku w środku zdania.
Róż­ni­ca zapisu bywa całym py­ta­niem: pseu­do­kla­sa ma JEDEN dwu­kro­pek, pseu­do­ele­ment DWA. Cztery naj­star­sze pseu­do­ele­men­ty (::first-letter, ::first-line, ::before, ::after) prze­glą­dar­ki przyj­mu­ją też z jednym dwu­krop­kiem, bo tak za­pi­sy­wał je CSS2, i w takiej po­sta­ci stoją jesz­cze w ban­kach pytań. Nowsze, jak ::selection, wy­ma­ga­ją już dwóch, więc w kodzie pi­sa­nym dziś używa się dwóch dwu­krop­ków wszę­dzie.
Pu­łap­ka: p::first-letter to pseu­do­ele­ment, p.first-letter to akapit z klasą o nazwie first-letter, #first-letter to ele­ment o takim iden­ty­fi­ka­to­rze, a p [first-letter] to zapis se­lek­to­ra atry­bu­tu. Cały zestaw od­po­wie­dzi roz­strzy­ga się na róż­ni­cy tych czte­rech znaków.

Sklep: menu, zebra, ini­cjał i zło­tów­ki

Wi­try­na sklepu kom­pu­te­ro­we­go z działu o HTML do­sta­je w pliku styl.css cztery reguły. Menu to lista od­no­śni­ków w <nav>, cennik to tabela z <tbody>, a opisy pro­duk­tów siedzą w <article>, tak jak zbu­do­wa­ła je lekcja o znacz­ni­kach sekcji.
nav li a:hover { color: Tomato; } tbody tr:nth-child(even) { background-color: #f4f4f4; } tbody tr:hover { background-color: DarkSlateGray; color: #ffffff; } article p::first-letter { font-size: 250%; color: DarkSlateGray; }
Po­zy­cja menu zmie­nia kolor do­pie­ro pod kur­so­rem, a poza nim wy­glą­da jak reszta. Co drugi wiersz cen­ni­ka ma jasne tło, przez co tabela czyta się wier­sza­mi, a wiersz pod kur­so­rem robi się ciemny z białym tek­stem. Pierw­sza litera każ­de­go opisu pro­duk­tu jest dwa i pół raza więk­sza od reszty aka­pi­tu. Ko­lej­ność reguł znaczy tu tyle samo co przy od­no­śni­kach: tr:hover stoi za tr:nth-child(even), więc pod­świe­tle­nie wska­za­ne­go wier­sza wy­gry­wa z tłem zebry. Gdyby ko­lum­na z ceną w tabeli cen­ni­ka trzy­ma­ła samą liczbę, jed­nost­kę do­pi­sze arkusz stylów:
td.cena::after { content: " zł"; }

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne mają kilka sta­łych kształ­tów. Pierw­szy to na­zwa­nie zapisu: a:link {color: red} de­fi­niu­je pseu­do­kla­sę, a nie klasę, iden­ty­fi­ka­tor czy pseu­do­ele­ment, na­to­miast p::first-letter to pseu­do­ele­ment. Drugi to wska­za­nie pseu­do­kla­sy do za­da­ne­go opisu: ele­ment zmie­nia­ją­cy kolor czcion­ki po na­je­cha­niu kur­so­rem to :hover, od­no­śnik już otwar­ty to :visited, a kolor hi­per­łą­cza „po po­wro­cie na stronę" bierze się zawsze z reguły za­pi­sa­nej dla :visited. Trzeci to od­czy­ta­nie go­to­wej reguły: tr:nth-child(even) wy­peł­nia tłem wier­sze PARZYSTE, a nie nie­pa­rzy­ste. Czwar­ty to for­ma­to­wa­nie pierw­szej litery aka­pi­tu, gdzie po­praw­ną od­po­wie­dzią jest p::first-letter, a nie klasa p.first-letter, iden­ty­fi­ka­tor #first-letter ani se­lek­tor atry­bu­tu; pierw­sze­mu wier­szo­wi tekstu od­po­wia­da p::first-line. Piąty to reguła li:hover { color: Maroon; } z py­ta­niem, co zrobi: zmieni kolor tekstu punktu listy po na­je­cha­niu kur­so­rem, a nie sfor­ma­tu­je ele­men­ty o iden­ty­fi­ka­to­rze hover, bo iden­ty­fi­ka­tor za­czy­na się krzy­ży­kiem.
Po­mył­ki wra­ca­ją w tych samych miej­scach. :nth-child liczy od 1, więc even obej­mu­je wiersz drugi, czwar­ty i szósty, a pierw­szy zo­sta­je bez tła. Pseu­do­kla­sa ma jeden dwu­kro­pek, pseu­do­ele­ment dwa, choć stare zapisy z jednym dwu­krop­kiem nadal dzia­ła­ją i po­ja­wia­ją się wśród od­po­wie­dzi. ::before i ::after bez wła­ści­wo­ści content nie wy­świe­tlą ni­cze­go. Pseu­do­kla­sa do­pi­sa­na ze spacją, jak tr :hover, to już zwią­zek se­lek­to­rów i wska­zu­je ele­ment w środku wier­sza, a nie wiersz.
W za­da­niu prak­tycz­nym po­le­ce­nia z tej lekcji brzmią zwykle „zmiana koloru tła wier­sza tabeli po na­je­cha­niu na niego kur­so­rem myszy" oraz „po­więk­szo­na pierw­sza litera aka­pi­tu". Tłu­ma­czy się je wprost: pierw­sze to tr:hover { background-color: ... }, drugie to p::first-letter z po­da­nym roz­mia­rem czcion­ki. Reguła musi trafić do ZEWNĘTRZNEGO pliku do­łą­czo­ne­go przez <link>, bo styl w atry­bu­cie style kosz­tu­je punkt, a stanu po na­je­cha­niu i tak nie da się w nim za­pi­sać. Eg­za­mi­na­tor spraw­dza efekt myszą, więc po za­pi­sa­niu ar­ku­sza prze­jedź kur­so­rem po menu i po tabeli, za­miast ufać samemu kodowi.

Ściąga

Zapis
Znaczy
a:link
od­no­śnik jesz­cze nie­odwie­dzo­ny
a:visited
od­no­śnik od­wie­dzo­ny, kolor po po­wro­cie na stronę
a:hover
ele­ment wska­zy­wa­ny kur­so­rem myszy
a:active
ele­ment w trak­cie na­ci­ska­nia
input:focus
pole for­mu­la­rza wy­bra­ne do pi­sa­nia
tr:hover
wiersz tabeli pod kur­so­rem, tło zmie­nia background-color
li:first-child
pierw­szy punkt każdej listy
tr:nth-child(even)
wier­sze pa­rzy­ste: 2, 4, 6
tr:nth-child(odd)
wier­sze nie­pa­rzy­ste: 1, 3, 5
li:nth-child(3n)
co trzeci ele­ment: 3, 6, 9
p:nth-of-type(2)
drugi akapit wśród ro­dzeń­stwa tego typu
input:checked
za­zna­czo­ne pole wyboru albo przy­cisk opcji
input:invalid
pole z war­to­ścią ła­mią­cą reguły wa­li­da­cji
p::first-letter
pierw­sza litera aka­pi­tu, ini­cjał
p::first-line
pierw­szy wy­świe­tlo­ny wiersz aka­pi­tu
h2::before
treść z content do­sta­wio­na przed na­głów­kiem
td.cena::after
treść z content do­sta­wio­na po ko­mór­ce, tu jed­nost­ka
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Selektory CSS: element, klasa, id, atrybut, potomek, dziecko, bratnastępna: Kolory, jednostki i tekst w CSS: hex, rgb, hsl, px, em, rem, font i textspis działu: CSS

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (39)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.