ZAWODNIK

Selektory CSS: element, klasa, id, atrybut, potomek, dziecko, brat

INF.03 · teoria
autor: redakcja · 08.09.2026
Selektory CSS od podstaw: selektor elementu, klasy, identyfikatora, uniwersalny, grupowanie przecinkiem, selektory atrybutu oraz kombinatory potomka, dziecka i braci, z przykładami na stronie sklepu. Lekcja 4.2 kursu INF.03.

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

Przejrzyj pytania: cssĆwicz dział: css
Se­lek­tor to część reguły CSS sto­ją­ca przed na­wia­sem klam­ro­wym, która mówi, KTÓRE ele­men­ty strony do­sta­ną opi­sa­ny w niej styl. Reszta reguły to de­kla­ra­cje, czyli pary wła­ści­wość i war­tość, ale bez tra­fio­ne­go se­lek­to­ra nie za­dzia­ła żadna z nich. W części pi­sem­nej wra­ca­ją py­ta­nia „co ozna­cza zapis p > i", „którym se­lek­to­rem sfor­ma­to­wać wszyst­kie obrazy w aka­pi­cie", „czego do­ty­czy zapis .uzytkownik", „co robi img + p" oraz „w co trafia *". W za­da­niu prak­tycz­nym arkusz pisze „style wy­łącz­nie przez se­lek­tor dla danego znacz­ni­ka" albo „zde­fi­nio­wać styl dla klasy", więc źle do­bra­ny se­lek­tor kosz­tu­je punkt, choć strona wy­glą­da wtedy prawie tak samo.

Se­lek­to­ry proste: ele­ment, klasa, iden­ty­fi­ka­tor

Se­lek­tor prosty wska­zu­je ele­men­ty po jednej cesze: po nazwie znacz­ni­ka, po klasie albo po iden­ty­fi­ka­to­rze. Se­lek­tor ele­men­tu to sama nazwa znacz­ni­ka, bez żad­ne­go znaku przed nią, i obej­mu­je WSZYSTKIE takie ele­men­ty w do­ku­men­cie: reguła dla p sfor­ma­tu­je każdy akapit strony. To wła­śnie o niego prosi arkusz zda­niem „style wy­łącz­nie przez se­lek­tor dla danego znacz­ni­ka".
Se­lek­tor klasy to kropka i nazwa. Klasa jest war­to­ścią atry­bu­tu class w HTML, więc żeby z niej sko­rzy­stać, trzeba tę war­tość naj­pierw do­pi­sać do znacz­ni­ków. Tę samą klasę wolno dać do­wol­nej licz­bie ele­men­tów i różnym znacz­ni­kom naraz, a jeden ele­ment może nieść kilka klas roz­dzie­lo­nych spacją: class="cena promocja" łapie się i na .cena, i na .promocja. Se­lek­tor iden­ty­fi­ka­to­ra to krzy­żyk i nazwa. War­tość atry­bu­tu id jest na stro­nie uni­kal­na, więc taki se­lek­tor trafia do­kład­nie w jeden ele­ment i nadaje się do banera, stopki albo ko­twi­cy, do której pro­wa­dzi od­no­śnik href="#baner".
Se­lek­tor
Trafia w
Przy­kład
p
wszyst­kie aka­pi­ty, wska­za­ne nazwą znacz­ni­ka
p { color: #222; }
.cena
ele­men­ty z klasą cena w atry­bu­cie class
.cena { color: Tomato; }
#baner
jeden ele­ment o id="baner"
#baner { height: 80px; }
*
każdy ele­ment do­ku­men­tu
* { font-family: Helvetica; }
h1, h2
na­głów­ki obu stopni, gru­po­wa­nie prze­cin­kiem
h1, h2 { text-align: center; }
p.uwaga
tylko aka­pi­ty z klasą uwaga
p.uwaga { color: Tomato; }
a#logo
od­no­śnik o id="logo"
a#logo { border: none; }
Se­lek­tor uni­wer­sal­ny * trafia w każdy ele­ment do­ku­men­tu, od <html> po ostat­nią ko­mór­kę tabeli, więc od­po­wiedź na py­ta­nie z banku brzmi: do­ty­czy całego kodu HTML jako for­ma­to­wa­nie do­myśl­ne, a nie znacz­ni­ków o klasie albo iden­ty­fi­ka­to­rze równym *. Używa się go do rzeczy wspól­nych dla całej strony, na przy­kład do wy­ze­ro­wa­nia mar­gi­ne­sów ze­wnętrz­nych albo do usta­wie­nia jed­ne­go kroju czcion­ki.
Dwa zapisy skra­ca­ją arkusz. Gru­po­wa­nie prze­cin­kiem daje jednej de­kla­ra­cji kilka se­lek­to­rów naraz: h1, h2 znaczy tyle samo co dwie osobne reguły o iden­tycz­nej treści. Łą­cze­nie bez spacji zawęża tra­fie­nie do ele­men­tu speł­nia­ją­ce­go oba wa­run­ki: p.uwaga to akapit, który ma klasę uwaga, a a#logo to od­no­śnik o tym iden­ty­fi­ka­to­rze. Oba zapisy stoją obok siebie w py­ta­niu o for­ma­to­wa­nie aka­pi­tów klasy tekst oraz bloku o iden­ty­fi­ka­to­rze obrazki, gdzie po­praw­na od­po­wiedź brzmi p.tekst, div#obrazki.
Pu­łap­ka: p.uwaga bez spacji to akapit Z KLASĄ uwaga, a p .uwaga ze spacją to do­wol­ny ele­ment z tą klasą we­wnątrz aka­pi­tu. Spacja jest tu zna­kiem dzia­ła­nia, nie ozdobą.

Se­lek­to­ry atry­bu­tu

Se­lek­tor atry­bu­tu wy­bie­ra ele­men­ty po tym, czy mają dany atry­but i jaką ma on war­tość. Za­pi­su­je się go w na­wia­sie kwa­dra­to­wym, zwykle zaraz po nazwie znacz­ni­ka. Zysk jest taki, że styl trafia w grupę ele­men­tów bez do­pi­sy­wa­nia cze­go­kol­wiek do HTML: for­mu­larz za­mó­wie­nia ma kilka pól licz­bo­wych, a jeden se­lek­tor input[type="number"] zwęża je wszyst­kie naraz i pomija pola tek­sto­we.
Zapis
Trafia w
[type]
ele­ment, który ma atry­but type, bez wzglę­du na war­tość
[type="number"]
ele­ment, któ­re­go type ma do­kład­nie war­tość number
[href^="https"]
od­no­śnik, któ­re­go adres ZACZYNA się od https
[href$=".pdf"]
od­no­śnik, któ­re­go adres KOŃCZY się na .pdf
[href*="sklep"]
od­no­śnik, któ­re­go adres ZAWIERA sklep
[title~="jest"]
ele­ment, w któ­re­go title stoi całe słowo jest
Trzy znaki przed zna­kiem rów­no­ści czyta się jak strzał­ki: daszek celuje w po­czą­tek war­to­ści, znak dolara w jej koniec, gwiazd­ka w do­wol­ne miej­sce w środku. Falka jest osob­nym przy­pad­kiem i szuka CAŁEGO słowa od­dzie­lo­ne­go spa­cja­mi, więc [title~="jest"] po­mi­nie ele­ment o tytule „je­ste­śmy". Cu­dzy­słów wokół war­to­ści wolno po­mi­nąć i banki pytań podają zapis input[type=number] bez niego, ale wersja z cu­dzy­sło­wem jest zawsze bez­piecz­na.
input[type="number"] { width: 60px; } a[href$=".pdf"] { font-weight: bold; }
Pierw­sza reguła zwęża pola licz­bo­we for­mu­la­rza za­mó­wie­nia, druga po­gru­bia w stopce sklepu od­no­śnik do re­gu­la­mi­nu za­pi­sa­ne­go w PDF, bez ru­sza­nia samego od­no­śni­ka w HTML.

Se­lek­to­ry re­la­cji: po­to­mek, dziec­ko, brat

Kom­bi­na­tor to znak sto­ją­cy MIĘDZY dwoma se­lek­to­ra­mi, który mówi, w jakim po­ło­że­niu wzglę­dem siebie mają być ele­men­ty. Bez niego reguła patrzy na ele­ment w ode­rwa­niu od reszty strony, a z nim da się za­wę­zić styl do jed­ne­go bloku: nav a for­ma­tu­je od­no­śni­ki menu i nie tyka od­no­śni­ków w treści.
Kom­bi­na­tor
Zapis
Znaczy
po­tom­ka
nav a
każdy a we­wnątrz nav, na do­wol­nej głę­bo­ko­ści
dziec­ka
ul > li
tylko li leżący bez­po­śred­nio w ul
brata bez­po­śred­nie­go
h2 + p
pierw­szy p sto­ją­cy zaraz po h2
braci ogól­nych
h2 ~ p
wszyst­kie p za h2 w tym samym ro­dzi­cu
Cztery kopie tego samego drzewa HTML: p img trafia w każdy obraz w akapicie, p > img tylko w bezpośredni, h2 + p w sąsiada, h2 ~ p we wszystkich dalszych
Ry­su­nek po­ka­zu­je jedno drzewo cztery razy, z pod­świe­tlo­ny­mi tra­fie­nia­mi. Se­lek­tor po­tom­ka p img bierze obraz leżący w aka­pi­cie na do­wol­nej głę­bo­ko­ści, także wtedy, gdy stoi w środku od­no­śni­ka albo innego znacz­ni­ka we­wnątrz tego aka­pi­tu. Se­lek­tor dziec­ka p > img bierze wy­łącz­nie obraz będący bez­po­śred­nią za­war­to­ścią aka­pi­tu, więc obraz scho­wa­ny o jeden poziom głę­biej wypada z gry. Brat bez­po­śred­ni h2 + p trafia w jeden ele­ment: akapit sto­ją­cy zaraz za na­głów­kiem, i tylko wtedy, gdy nic się między nie nie wci­snę­ło. Bracia ogólni h2 ~ p tra­fia­ją we wszyst­kie aka­pi­ty sto­ją­ce za tym na­głów­kiem, byle miały tego samego ro­dzi­ca.
Ro­dzeń­stwo działa tylko w przód. Nie ma kom­bi­na­to­ra, który sfor­ma­to­wał­by ele­ment sto­ją­cy PRZED innym, więc opis „akapit po­prze­dza­ją­cy obraz" nie da się za­pi­sać żadnym z czte­rech znaków.
Pu­łap­ka: p > i to tekst po­chy­lo­ny bez­po­śred­nio we­wnątrz aka­pi­tu, a p i to każdy tekst po­chy­lo­ny w aka­pi­cie, choćby leżał w środku innego znacz­ni­ka. Za­mia­na jed­ne­go zapisu na drugi zmie­nia liczbę tra­fio­nych ele­men­tów.
Ta sama róż­ni­ca wraca w py­ta­niu z trójką b > i, b + i i b i. Pierw­szy zapis to po­chy­le­nie bez­po­śred­nio w po­gru­bie­niu, drugi to po­chy­lo­ny frag­ment sto­ją­cy zaraz ZA po­gru­bio­nym, trzeci to po­chy­le­nie gdzie­kol­wiek w po­gru­bie­niu. Po­dob­nie img + p znaczy akapit sto­ją­cy bez­po­śred­nio po ob­ra­zie, a nie akapit z ob­ra­zem w środku ani obraz w aka­pi­cie.

Pseu­do­kla­sy i pseu­do­ele­men­ty

Pseu­do­kla­sa to zapis z dwu­krop­kiem, który wy­bie­ra ele­ment według stanu, a nie według miej­sca w kodzie: a:hover (na­je­cha­nie) trafia w od­no­śnik do­pie­ro wtedy, gdy stoi nad nim wskaź­nik myszy, a tr:nth-child(even) w pa­rzy­ste wier­sze tabeli. Pseu­do­ele­ment to zapis z po­dwój­nym dwu­krop­kiem, który sięga po część ele­men­tu nie­ist­nie­ją­cą w HTML jako osobny znacz­nik, na przy­kład p::first-letter (pierw­sza litera) albo p::first-line (pierw­szy wiersz). Obie grupy mają własną lekcję: pseu­do­kla­sy i pseu­do­ele­men­ty.

Który se­lek­tor kiedy

Wybór za­czy­na się od dwóch pytań: ile ele­men­tów ma zmie­nić wygląd i czy wolno ruszać HTML. Nazwa znacz­ni­ka wy­star­cza, gdy styl obej­mu­je wszyst­kie ele­men­ty jed­ne­go ro­dza­ju, i to jest do­myśl­na droga na eg­za­mi­nie prak­tycz­nym. Klasa jest wła­ści­wa, gdy ten sam wygląd ma wrócić w kilku miej­scach albo na róż­nych znacz­ni­kach: cena w tabeli i cena w opisie pro­duk­tu do­sta­ją class="cena" oraz jedną regułę. Iden­ty­fi­ka­tor pasuje do ele­men­tu je­dy­ne­go na stro­nie, zwłasz­cza gdy i tak jest po­trzeb­ny jako cel ko­twi­cy. Kom­bi­na­tor po­tom­ka zawęża styl do bloku, dzięki czemu aside a i nav a mogą wy­glą­dać ina­czej, choć oba do­ty­czą od­no­śni­ków.
Gdy dwie reguły do­ty­czą tego samego ele­men­tu i usta­wia­ją tę samą wła­ści­wość, wy­gry­wa ta o wyż­szej spe­cy­ficz­no­ści, czyli li­czą­ca więcej iden­ty­fi­ka­to­rów, potem klas, a na końcu nazw znacz­ni­ków. Liczy to lekcja o do­łą­cza­niu stylów i ka­ska­do­wo­ści.

Styl sklepu w jednym ar­ku­szu

Strona sklepu kom­pu­te­ro­we­go z działu o HTML ma baner, menu, panel boczny, blok główny i stopkę, a w bloku głów­nym sekcję z tabelą cen i menu w po­sta­ci listy. Cztery reguły w pliku styl.css ob­słu­gu­ją cztery różne miej­sca tej strony i żadna z nich nie wymaga zmiany w HTML.
nav a { color: #f4f4f4; } main > section { padding: 10px; } table td { border: 1px solid #222; } input[type="number"] { width: 60px; }
Pierw­sza reguła roz­ja­śnia od­no­śni­ki menu, bo leżą na ciem­nym pasku, i nie dotyka od­no­śni­ków w treści. Druga daje mar­gi­ne­sy we­wnętrz­ne sek­cjom le­żą­cym bez­po­śred­nio w bloku głów­nym, więc sekcja za­gnież­dżo­na o poziom głę­biej ich nie do­sta­nie. Trze­cia rysuje ob­ra­mo­wa­nie ko­mó­rek danych w każdej tabeli. Czwar­ta zwęża pola licz­bo­we for­mu­la­rza. Piąta rzecz, wy­róż­nie­nie ceny pro­mo­cyj­nej, jest inna: wymaga naj­pierw do­pi­sa­nia klasy do znacz­ni­ka w HTML, a do­pie­ro potem reguły w ar­ku­szu.
.promocja { color: Tomato; }

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne o se­lek­to­ry mają kilka sta­łych kształ­tów. Pierw­szy to od­czy­ta­nie go­to­we­go zapisu: p > i znaczy „tylko tekst po­chy­lo­ny umiesz­czo­ny bez­po­śred­nio we­wnątrz aka­pi­tu", a nie „akapit z przy­pi­sa­ną klasą" ani „po­chy­lo­ny tekst gdzie­kol­wiek na stro­nie". Drugi to do­bra­nie se­lek­to­ra do opisu: wszyst­kie obrazy za­war­te w aka­pi­cie for­ma­tu­je p img, a nie p#img, p.img ani p+img, bo krzy­żyk ozna­cza iden­ty­fi­ka­tor, kropka klasę, a plus akapit sto­ją­cy za ob­ra­zem. Trzeci to py­ta­nie o klasę: styl .uzytkownik obej­mu­je wy­łącz­nie te ele­men­ty, którym przy­pi­sa­no tę klasę atry­bu­tem class, a nie wszyst­kie aka­pi­ty strony. Czwar­ty to se­lek­tor uni­wer­sal­ny *, czyli for­ma­to­wa­nie do­myśl­ne całego kodu HTML. Piąty to img + p, czyli akapit wy­stę­pu­ją­cy bez­po­śred­nio po ob­ra­zie. Szósty to trójka b > i, b + i i b i, w której roz­strzy­ga, czy po­chy­lo­ny tekst ma leżeć w po­gru­bio­nym, czy zaraz za nim. Wraca też py­ta­nie o na­zew­nic­two: w regule h1 { color: blue; } zapis h1 jest se­lek­to­rem, klasę de­fi­niu­je się kropką, a a:link i tr:nth-child(even) to pseu­do­kla­sy, nie klasy ani pseu­do­ele­men­ty.
W za­da­niu prak­tycz­nym po­le­ce­nia są krót­kie i trzeba je prze­ło­żyć na zapis. „Style wy­łącz­nie przez se­lek­tor dla danego znacz­ni­ka" znaczy: sama nazwa znacz­ni­ka, bez kropki, bez krzy­ży­ka i bez do­pi­sy­wa­nia cze­go­kol­wiek do HTML, więc p { } prze­cho­dzi, a .tresc { } nie. „Zde­fi­niuj styl dla klasy o nazwie promocja" znaczy kropkę i tę samą nazwę w ar­ku­szu oraz atry­but class="promocja" przy znacz­ni­ku, przy czym nazwa musi zga­dzać się co do znaku i nie ma w niej pol­skich liter. Gdy arkusz opi­su­je wygląd jed­ne­go bloku wska­za­ne­go z nazwy, na przy­kład banera, wy­star­czy se­lek­tor iden­ty­fi­ka­to­ra tego bloku. Cały arkusz ma być pli­kiem ze­wnętrz­nym do­łą­czo­nym znacz­ni­kiem <link>, bo styl wpi­sa­ny w atry­but style kosz­tu­je punkt.

Ściąga

Zapis
Trafia w
p
wszyst­kie aka­pi­ty, se­lek­tor ele­men­tu
.cena
ele­men­ty z klasą cena
#baner
jeden ele­ment o id="baner"
*
każdy ele­ment do­ku­men­tu
h1, h2
oba na­głów­ki naraz, gru­po­wa­nie prze­cin­kiem
p.uwaga
aka­pi­ty mające klasę uwaga
input[type="number"]
pola for­mu­la­rza typu licz­bo­we­go
a[href$=".pdf"]
od­no­śni­ki do plików PDF
nav a
od­no­śni­ki we­wnątrz menu, na do­wol­nej głę­bo­ko­ści
ul > li
punkty leżące bez­po­śred­nio w liście
h2 + p
akapit sto­ją­cy zaraz po na­głów­ku
h2 ~ p
wszyst­kie aka­pi­ty za na­głów­kiem
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Dołączanie stylów i kaskada: lokalne, wewnętrzne, zewnętrzne, specyficznośćnastępna: Pseudoklasy i pseudoelementy: hover, nth-child, first-letter, beforespis 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ą.