8. Selektory CSS

> Dodaj do ulubionych

Selektory CSS to specjalne wzorce umo┼╝liwiaj─ůce odnoszenie si─Ö do poszczeg├│lnych element├│w lub grup element├│w na stronie. Stanowi─ů one pierwszy cz┼éon budowy regu┼éy CSS, kt├│ra sk┼éada si─Ö w┼éa┼Ťnie z selektora i bloku deklaracji.

Istnieje kilka typ├│w selektor├│w. Niekt├│re z nich maj─ů bardzo szeroki zakres dzia┼éania, jak np. selektor uniwersalny, a inne ÔÇô bardzo w─ůski, jak na przyk┼éad selektor identyfikatora. Dzi─Öki temu, w zale┼╝no┼Ťci od potrzeby, projektant za pomoc─ů jednej regu┼éy CSS mo┼╝e stylizowa─ç zar├│wno du┼╝e obszary strony, jak i mo┼╝e precyzyjnie wybiera─ç spo┼Ťr├│d nich pojedyncze elementy, kt├│re go w danym przypadku interesuj─ů.

Sk┼éadnia selektor├│w CSS zasadniczo jest prosta, cho─ç przez po┼é─ůczenie wielu z nich mo┼╝na uzyska─ç naprawd─Ö skomplikowane konstrukcje. Poni┼╝ej znajduje si─Ö opis og├│lnej budowy selektor├│w CSS oraz obja┼Ťnienie podstawowej terminologii dotycz─ůcej tych struktur. Jej znajomo┼Ť─ç mo┼╝e si─Ö przyda─ç podczas poszukiwania dodatkowych, jeszcze bardziej szczeg├│┼éowych, informacji w specyfikacjach CSS.

Je┼Ťli potrzebujesz tylko szybkiego przypomnienia sk┼éadni wybranego selektora, skorzystaj z poni┼╝szej tabeli. Je┼Ťli natomiast chcesz pozna─ç og├│ln─ů budow─Ö selektor├│w CSS oraz chcesz szczeg├│┼éowo dowiedzie─ç si─Ö, jak u┼╝ywa─ç r├│┼╝nych rodzaj├│w selektor├│w, przeczytaj ten rozdzia┼é w ca┼éo┼Ťci.

Zestawienie selektor├│w CSS
SelektorNazwaPrzykładOpis
*Selektor uniwersalny*Wybiera wszystkie elementy
nazwa elementuSelektor typuemWybiera wszystkie elementy em
[atrybut]Selektor atrybutu[lang]Wybiera wszystkie elementy maj─ůce atrybut lang
[atrybut=warto┼Ť─ç]Selektor atrybutu[lang=en]Wybiera wszystkie elementy maj─ůce atrybut lang o warto┼Ťci en
[atrybut~=warto┼Ť─ç]Selektor atrybutu[title~=pies]Wybiera wszystkie elementy maj─ůce atrybut title zawieraj─ůcy s┼éowo pies
[atrybut|=warto┼Ť─ç]Selektor atrybutu[lang|=en]Wybiera wszystkie elementy maj─ůce atrybut lang o warto┼Ťci en lub zaczynaj─ůcy si─Ö od ┼éa┼äcucha znak├│w en-
[atrybut^=warto┼Ť─ç]Selektor atrybutu[href^=https]Wybiera wszystkie elementy maj─ůce atrybut href, kt├│rego warto┼Ť─ç zaczyna si─Ö od ┼éa┼äcucha znak├│w https
[atrybut$=warto┼Ť─ç]Selektor atrybutu[href$=pl]Wybiera wszystkie elementy maj─ůce atrybut href, kt├│rego warto┼Ť─ç ko┼äczy si─Ö ┼éa┼äcuchem znak├│w pl
[atrybut*=warto┼Ť─ç]Selektor atrybutu[href*=bang]Wybiera wszystkie elementy maj─ůce atrybut href, kt├│rego warto┼Ť─ç w kt├│rymkolwiek miejscu zawiera przynajmniej jeden ┼éa┼äcuch znak├│w bang
.klasaSelektor klasy.noteWybiera wszystkie elementy przypisane do klasy note za pomoc─ů atrybutu class
#identyfikatorSelektor identyfikatora#headlineWybiera element przypisany do identyfikatora headline za pomoc─ů atrybutu id
:pseudoklasaPseudoklasaÔÇöPseudoklas jest bardzo du┼╝o, ich opis znajduje si─Ö w rozdziale Pseudoklasy CSS
::pseudoelementPseudoelementÔÇöOpis pseudoelement├│w znajduje si─Ö w rozdziale Pseudoelementy CSS
A BSelektor potomkap emWybiera wszystkie elementy em znajduj─ůce si─Ö w elementach p
A > BSelektor dzieckap > emWybiera wszystkie elementy em, kt├│re s─ů dzie─çmi element├│w p
A + BSelektor przystaj─ůcego elementu siostrzanegoem + strongWybiera ka┼╝dy element strong, kt├│ry znajduje si─Ö na tym samym poziomie hierarchii drzewa dokumentu, co element em i obu tych element├│w nie rozdziela ┼╝aden inny element
A ~ BSelektor dowolnego elementu siostrzanegoem ~ strongWybiera ka┼╝dy element strong, kt├│ry znajduje si─Ö na tym samym poziomie hierarchii drzewa dokumentu, niezale┼╝nie od tego czy oba elementy rozdzielaj─ů jakiekolwiek inne elementy

Budowa selektora CSS

Selektor CSS sk┼éada si─Ö z jednej lub wi─Ökszej liczby sekwencji selektor├│w prostych rozdzielonych kombinatorami (ang. combinator), spo┼Ťr├│d kt├│rych ostatnia mo┼╝e by─ç zako┼äczona jednym pseudoelementem.

Sekwencja selektor├│w prostych (ang. sequence of simple selectors) to ci─ůg selektor├│w prostych, kt├│ry zawsze zaczyna si─Ö od selektora uniwersalnego lub selektora typu, bezpo┼Ťrednio po kt├│rych opcjonalnie mo┼╝e znajdowa─ç si─Ö jeden lub wi─Öcej pozosta┼éych selektor├│w prostych, czyli atrybutu, klasy, identyfikatora lub pseudoklasy w dowolnej kolejno┼Ťci. Cz┼éon├│w takiej sekwencji nie rozdzielaj─ů ┼╝adne kombinatory. W takim ci─ůgu mo┼╝e znajdowa─ç si─Ö tylko jeden selektor typu lub uniwersalny. Wszystkie poni┼╝sze przyk┼éady to sekwencje selektor├│w prostych:

  • *.redText ÔÇô selektor uniwersalny i selektor klasy: wybiera wszystkie elementy nale┼╝─ůce do klasy redText, np. <strong class="redText">ÔÇŽ</strong>
  • p#headline ÔÇô selektor typu i selektor identyfikatora: wybiera element p o identyfikatorze headline, np. <p id="headline">ÔÇŽ</p>
  • a:hover ÔÇô selektor typu i pseudoklasa: wybiera element a, nad kt├│rym znajduje si─Ö kursor
  • p#headline.red:hover ÔÇô selektor typu, selektor identyfikatora, selektor klasy i pseudoklasa: wybiera element, kt├│ry nale┼╝y do klasy red, nad kt├│rym znajduje si─Ö kursor. Element ten musi znajdowa─ç si─Ö w elemencie p o identyfikatorze headline, np. <p id="headline" class="red">ÔÇŽ</p>
  • * ÔÇô selektor uniwersalny: wybiera wszystkie elementy
  • em ÔÇô selektor typu: wybiera wszystkie elementy em

Selektor prosty (ang. simple selector) to z kolei jeden z nast─Öpuj─ůcych rodzaj├│w selektor├│w: selektor uniwersalny, selektor typu, selektor atrybutu, selektor klasy, selektor identyfikatora lub pseudoklasa. Poni┼╝ej znajduje si─Ö kilka przyk┼éadowych selektor├│w prostych.

  • * ÔÇô selektor uniwersalny: wybiera wszystkie elementy
  • strong ÔÇô selektor typu: wybiera wszystkie elementy strong
  • .note ÔÇô selektor klasy: wybiera wszystkie elementy nale┼╝─ůce do klasy .note, np. <p class="note">ÔÇŽ</p>
  • [lang] ÔÇô selektor atrybutu: wybiera wszystkie elementy z atrybutem lang, np.: <i lang="en">selector</i>
  • #headline ÔÇô selektor identyfikatora: wybiera element z identyfikatorem headline, np. <div id="headline">ÔÇŽ</div>

Elementy, do kt├│rych pasuje dany selektor, nazywaj─ů si─Ö podmiotami selektora (ang. subjects of the selector).

Rozr├│┼╝nianie wielko┼Ťci liter w selektorach

Wielko┼Ť─ç liter w selektorach nie ma znaczenia w zakresie kontrolowanym przez CSS. To znaczy, je┼Ťli projektant strony internetowej zdefiniuje identyfikator jakisID, to selektor musi zawiera─ç dok┼éadnie t─Ö nazw─Ö, czyli jakisID (poniewa┼╝ nazwa identyfikatora jest pod kontrol─ů autora strony, a nie CSS), np.:

p#jakisID {color: red}
p#jakisId {color: green}

W tym przypadku tekst w elemencie <p id="jakisID">ÔÇŽ</p> b─Ödzie mia┼é kolor czerwony.

Je┼Ťli natomiast chodzi o nazwy element├│w, to w HTML wielko┼Ť─ç liter w ich nazwach nie ma znaczenia, a co za tym idzie, nie ma ona znaczenia tak┼╝e w selektorach CSS, np.:

p {color: red}
P {color: green}

W tym przypadku kolor pisma w akapitach b─Ödzie zielony, poniewa┼╝ oba selektory zostan─ů dopasowane, ale zgodnie z zasadami kaskady zastosowany zostanie ostatni z nich.

Selektory proste

Do selektor├│w prostych zaliczaj─ů si─Ö: selektor uniwersalny, selektor typu, selektor atrybutu, selektor klasy, selektor identyfikatora oraz selektor pseudoklasy. Poni┼╝ej znajduje si─Ö ich opis.

Selektor uniwersalny

Selektor uniwersalny (ang. universal selector) ma posta─ç gwiazdki i u┼╝yty w pojedynk─Ö odnosi si─Ö do wszystkich element├│w na stronie, np.:

* {color: green}

Je┼Ťli selektor uniwersalny nie jest jedynym elementem sekwencji selektor├│w prostych albo bezpo┼Ťrednio po nim wyst─Öpuje pseudoelement, to selektor uniwersalny mo┼╝na opu┼Ťci─ç. Dlatego poni┼╝sze pary selektor├│w s─ů prawid┼éowe i r├│wnowa┼╝ne:

*.note
.note

#identyfikator
*#identyfikator

[lang=fr]
*[lang=fr]

::first-letter
*::first-letter

Ponadto za pomoc─ů selektora uniwersalnego mo┼╝na wygodnie wybiera─ç grupy element├│w znajduj─ůce si─Ö w wybranym elemencie, np.:

div p * {color: red}
ÔÇŽ
<div><p>To jest akapit <em>zawieraj─ůcy</em> jaki┼Ť <strong>wa┼╝ny tekst</strong>.</p></div>

Powy┼╝szy selektor wybiera wszystkie elementy znajduj─ůce si─Ö w elementach p, kt├│re znajduj─ů si─Ö w elementach div. W zwi─ůzku z tym w tym przypadku czerwony kolor pisma b─Öd─ů mia┼éy elementy em i strong.

Spójrz na jeszcze jeden przykład:

div p *.red {color: red}
ÔÇŽ
<div><p>To jest <span class="red">akapit</span> zawieraj─ůcy <strong class="red">wa┼╝ny tekst</strong> i <strong>wa┼╝ne poj─Öcie</strong>.</p></div>

W tym przypadku czerwony kolor pisma b─Öd─ů mia┼éy elementy span i strong przypisane do klasy red, poniewa┼╝ ten selektor wybiera wszystkie elementy przypisane do klasy red znajduj─ůce si─Ö w elemencie p, kt├│ry znajduje si─Ö w elemencie div.

Selektor typu

Selektor typu (ang. type selector, potocznie cz─Ö┼Ťciej nazywany selektorem elementu, selektorem tagu lub selektorem znacznika) to najprostszy rodzaj selektora w CSS. Ma on po prostu posta─ç nazwy elementu HTML (lub XML albo innego, zale┼╝nie od typu dokumentu) i odnosi si─Ö do wszystkich egzemplarzy tego elementu na stronie, np.:

em {color: lightpink}

W tym przypadku wszystkie elementy em b─Öd─ů mia┼éy jasnor├│┼╝owy kolor pisma.

Selektor atrybutu

Selektor atrybutu (ang. attribute selector) wybiera elementy na podstawie ich atrybut├│w. Jest kilka selektor├│w atrybutu, kt├│re umo┼╝liwiaj─ů odnoszenie si─Ö do element├│w na r├│┼╝ne sposoby w zale┼╝no┼Ťci od r├│┼╝nych cech ich atrybut├│w.

Na przyk┼éad, je┼Ťli na stronie s─ů u┼╝ywane fragmenty tekstu w r├│┼╝nych j─Özykach i chcemy nada─ç im r├│┼╝ne formatowanie w zale┼╝no┼Ťci od j─Özyka, mo┼╝emy w tym celu wykorzysta─ç w┼éa┼Ťnie selektor atrybutu. Sp├│jrz na poni┼╝szy kod HTML:

<i lang="fr">case à cocher</i>
<i lang="en">checkbox</i>

Powiedzmy, ┼╝e chcemy, aby tekst w j─Özyku francuskim by┼é zielony, a tekst w j─Özyku angielskim br─ůzowy. Ten pomys┼é w ┼éatwy spos├│b zrealizujemy za pomoc─ů selektora atrybutu odnosz─ůcego si─Ö do warto┼Ťci atrybutu:

[lang="fr"] {color: green}
[lang="en"] {color: brown}

Teraz wszystkie elementy z atrybutem lang o warto┼Ťci fr b─Öd─ů mia┼éy zielony kolor pisma, a wszystkie elementy z atrybutem lang o warto┼Ťci en b─Öd─ů mia┼éy br─ůzowy kolor pisma.

Oczywi┼Ťcie mogliby┼Ťmy te┼╝ u┼Ťci┼Ťli─ç nasze selektory, aby dotyczy┼éy tylko element├│w i:

[lang="fr"] {color: green}
[lang="en"] {color: brown}

Powy┼╝sze przyk┼éady przedstawiaj─ů jeden z rodzaj├│w selektora atrybutu, ale wszystkich jest siedem. Ich dok┼éadny opis znajduje si─Ö poni┼╝ej.

[atr]
Wybiera elementy maj─ůce atrybut atr niezale┼╝nie od jego warto┼Ťci, np.:
[lang] {color: green}
ÔÇŽ
<i lang="en">checkbox</i>
<i lang="fr">case à cocher</i>

Oba powy┼╝sze elementy b─Öd─ů mia┼éy zielony kolor pisma.

[atr=war]
Wybiera elementy maj─ůce atrybut atr o podanej warto┼Ťci war. Warto┼Ť─ç ta mo┼╝e znajdowa─ç si─Ö w cudzys┼éowie prostym pojedynczym lub podw├│jnym albo mo┼╝e by─ç podana bez cudzys┼éowu, np.:
[lang=en] {color: green}
ÔÇŽ
<i lang="en">checkbox</i>
<i lang="fr">case à cocher</i>

Tylko pierwszy z powyższych elementów będzie miał zielony kolor pisma.

[atr~=war]
Wybiera elementy, kt├│rych atrybut atr ma warto┼Ť─ç zawieraj─ůc─ů s┼éowo war. Ten selektor dotyczy tylko tych atrybut├│w, kt├│re mog─ů zawiera─ç s┼éowa rozdzielane bia┼éymi znakami, takich jak title albo class, np.:
[title~="francusku"] {color: red}
ÔÇŽ
<i lang="fr" title="To po francusku znaczy pole wyboru">case  à cocher</i>

Ka┼╝dy element, kt├│rego atrybut title zawiera w warto┼Ťci s┼éowo francusku b─Ödzie mia┼é zielony kolor pisma.

[atr|=war]
Wybiera elementy, kt├│rych atrybut atr ma warto┼Ť─ç war lub warto┼Ť─ç zaczynaj─ůc─ů si─Ö od war-, np.:
[lang|=en]
ÔÇŽ
<i lang="en-US">checkbox</i>
[atr^=war]
Wybiera elementy, kt├│rych atrybut atr ma warto┼Ť─ç zaczynaj─ůc─ů si─Ö od ┼éa┼äcucha znak├│w war, np.
[href^=https]
ÔÇŽ
<a href="https://shebang.pl">Shebang.pl</a>
<a href="http://shebang.pl">Shebang.pl</a>

Ten selektor wybierze tylko pierwszy z powy┼╝szych element├│w a.

[atr$=war]
Wybiera elementy, kt├│rych atrybut atr ma warto┼Ť─ç ko┼äcz─ůc─ů si─Ö ┼éa┼äcuchem znak├│w war.
[href$=".pl"]
  ÔÇŽ
<a href="https://shebang.pl">Shebang.pl</a>
<a href="http://shebang.com">Shebang.com</a>

Ten selektor wybierze tylko pierwszy z powy┼╝szych element├│w a.

W tym przypadku konieczne by┼éo u┼╝ycie cudzys┼éowu, poniewa┼╝ warto┼Ť─ç zaczyna si─Ö od kropki.

[atr*=war]
Wybiera elementy, kt├│rych atrybut atr ma warto┼Ť─ç zawieraj─ůc─ů przynajmniej jedno wyst─ůpienie ┼éa┼äcucha znak├│w war w dowolnym miejscu, np.:
[href*="bang"]
ÔÇŽ
<a href="https://shebang.pl">Shebang.pl</a>
Identyfikator i/I
Dodatek identyfikatora i lub I przed nawiasem zamykaj─ůcym ] selektora atrybutu wy┼é─ůcza rozr├│┼╝nianie wielko┼Ťci liter w przypadkach, gdy jest ona rozr├│┼╝niana, np.:
[id=fR i] {color: green}
ÔÇŽ
<i id="fr">case à cocher</i>

Normalnie wielko┼Ť─ç liter w atrybucie identyfikatora jest rozr├│┼╝niana. Jednak w tym przypadku element z identyfikatorem fr b─Ödzie mia┼é zielony kolor pisma dzi─Öki dodaniu identyfikatora i do selektora.

Selektor klasy

Selektor klasy (ang. class selector) ma posta─ç kropki i wybiera wszystkie elementy, kt├│re zosta┼éy przypisane do okre┼Ťlonej klasy (za pomoc─ů atrybutu class) w kodzie HTML, np.:

.note {color: green}
ÔÇŽ
<div class="note">UwagaÔÇŽ</div>

Wszystkie elementy na stronie maj─ůce atrybut class o warto┼Ťci note b─Öd─ů mia┼éy zielony kolor pisma.

Selektor identyfikatora

Selektor identyfikatora (ang. identifier selector) jest bardzo podobny do selektora klasy, tylko zamiast kropki ma posta─ç krzy┼╝yka (#). Wybiera element, kt├│remu w kodzie HTML nadano okre┼Ťlony identyfikator (za pomoc─ů atrybutu id) ÔÇô pami─Ötaj, ┼╝e na stronie mo┼╝e znajdowa─ç si─Ö tylko jeden element o okre┼Ťlonym identyfikatorze ÔÇô np.:

#headline {color: green}
ÔÇŽ
<div id="headline">ÔÇŽ</div>

Element, kt├│rego atrybut id ma warto┼Ť─ç headline, b─Ödzie mia┼é zielony kolor pisma.

Selektor pseudoklasy

Pseudoklasy to specjalny rodzaj selektora, kt├│ry umo┼╝liwia odwo┼éywanie si─Ö do element├│w w zale┼╝no┼Ťci od ich obecnego stanu, np. za pomoc─ů pseudoklasy :hover mo┼╝na formatowa─ç element, nad kt├│rym obecnie znajduje si─Ö kursor.

Podstawowy opis pseudoklas CSS znajduje si─Ö w Kursie HTML i CSS w podrozdziale Pseudoklasy rozdzia┼éu po┼Ťwi─Öconego ┼é─ůczom HTML.

Natomiast dokładny opis wszystkich pseudoklas obecnie dostępnych w CSS znajduje się w rozdziale Pseudoklasy CSS tego kursu.

Selektor pseudoelementu

Pseudoelementy to specjalne konstrukcje dodawane do selektor├│w, umo┼╝liwiaj─ůce wygodne odnoszenie si─Ö do pewnych cz─Ö┼Ťci element├│w.

Na przyk┼éad za pomoc─ů pseudoelementu ::first-letter mo┼╝na okre┼Ťli─ç formatowanie pierwszej litery w wybranych elementach, a za pomoc─ů pseudoelementu ::first-line mo┼╝na zmieni─ç formatowanie pierwszego wiersza tekstu wybranych element├│w.

Niekt├│re pseudoelementy daj─ů dost─Öp do cz─Ö┼Ťci strony, do kt├│rych nie da si─Ö odnie┼Ť─ç w inny spos├│b, a inne tylko u┼éatwiaj─ů ten dost─Öp. Tak jest w przypadku dw├│ch pseudoelement├│w przytoczonych w poprzednim akapicie.

Pierwsz─ů liter─Ö tekstu w wybranych elementach mo┼╝na uj─ů─ç cho─çby w elementy span i cho─ç by┼éoby to ┼╝mudne, to jest mo┼╝liwe.

Natomiast pierwszy wiersz tekstu jest nieuchwytny z poziomu HTML, poniewa┼╝ zmienia si─Ö on w zale┼╝no┼Ťci od rozmiaru okna przegl─ůdarki.

Podstawowy opis pseudoelement├│w CSS znajduje si─Ö w Kursie HTML i CSS w podrozdziale Pseudoelementy rozdzia┼éu po┼Ťwi─Öconego ┼é─ůczom HTML.

Natomiast dokładny opis wszystkich pseudoelementów obecnie dostępnych w CSS znajduje się w rozdziale Pseudoelementy CSS tego kursu.

Kombinatory

Czasami selektory proste i sekwencje selektor├│w prostych nie wystarczaj─ů i wtedy mo┼╝na pos┼éugiwa─ç si─Ö tzw. kombinatorami (ang. combinator), kt├│re pozwalaj─ů na ┼é─ůczenie tych dw├│ch pierwszych rodzaj├│w w celu u┼Ťci┼Ťlenia wyboru.

Powiedzmy na przyk┼éad, ┼╝e chcemy odnie┼Ť─ç si─Ö do wszystkich element├│w em znajduj─ůcych si─Ö w elementach p. Nie da si─Ö wyrazi─ç takiej zale┼╝no┼Ťci za pomoc─ů selektor├│w prostych ani sekwencji selektor├│w prostych. Do tego celu s┼éu┼╝y kombinator potomka.

W CSS obecnie dost─Öpne s─ů cztery kombinatory: bia┼éy znak, znak wi─Ökszo┼Ťci (>), znak plusa (+) oraz tylda (~). Jako bia┼éego znaku u┼╝ywa si─Ö praktycznie tylko spacji, ale mo┼╝e nim by─ç te┼╝ znak tabulatora, znak powrotu karetki, znak nowego wiersza oraz znak ko┼äca strony. Dla uproszczenia dalej b─Ödziemy pos┼éugiwa─ç si─Ö s┼éowem spacja w tym kontek┼Ťcie.

Spacja reprezentuje tzw. kombinator potomka, czyli umo┼╝liwia w┼éa┼Ťnie odwo┼éywanie si─Ö do element├│w znajduj─ůcych si─Ö w innych elementach bez wzgl─Ödu na stopie┼ä pokrewie┼ästwa w drzewie dokumentu.

Znak wi─Ökszo┼Ťci nazywa si─Ö kombinatorem dziecka, znak plus to kombinator przystaj─ůcego elementu siostrzanego, a tylda to kombinator elementu siostrzanego (niekoniecznie przystaj─ůcego).

Poni┼╝ej znajduje si─Ö dok┼éadniejszy opis tych kombinator├│w. Dla uproszczenia selektory je zawieraj─ůce czasami b─Ödziemy nazywa─ç odpowiednio selektorami potomka, dziecka itd.

Kombinator potomka

Kombinator potomka (ang. descendant combinator) ma posta─ç spacji. Umo┼╝liwia odnoszenie si─Ö do element├│w, kt├│re s─ů potomkami innych element├│w, czyli kr├│tko m├│wi─ůc pozwala odwo┼éa─ç si─Ö do elementu, kt├│ry znajduje si─Ö gdziekolwiek w innym elemencie, np.:

p em {color: green}
ÔÇŽ
<div>To jest jaki┼Ť <em>tekst wymagaj─ůcy emfazy</em>.</div>
<p>To te┼╝ jest jaki┼Ť <em>tekst wymagaj─ůcy emfazy</em>.</p>

W tym przypadku tylko element em znajduj─ůcy si─Ö w elemencie p b─Ödzie mia┼é zielony kolor pisma, poniewa┼╝ selektor p em odnosi si─Ö tylko do element├│w em znajduj─ůcych si─Ö w elementach p.

W poni┼╝szym przypadku element em tak┼╝e zmieni kolor pisma na zielony, poniewa┼╝ element em jest potomkiem elementu article:

article em {color: green}
ÔÇŽ
<article><div><p>To te┼╝ jest jaki┼Ť <em>tekst wymagaj─ůcy emfazy</em>.</p></div></article>

Selektor zawieraj─ůcy kombinator potomka jest potocznie nazywany selektorem potomka (ang. descendant selector).

Kombinator dziecka

Kombinator dziecka (ang. child combinator), maj─ůcy posta─ç znaku wi─Ökszo┼Ťci (>), pozwala odnie┼Ť─ç si─Ö do elementu b─Öd─ůcego dzieckiem innego elementu, tzn. wybierany element musi znajdowa─ç si─Ö bezpo┼Ťrednio w okre┼Ťlonym elemencie, np.:

div > em {color: green}
ÔÇŽ
<div>To jest jaki┼Ť <em>tekst wymagaj─ůcy emfazy</em>.</div>
<div><p>To jest jaki┼Ť <em>tekst wymagaj─ůcy emfazy</em>.</p></div>

W tym przykładzie tylko pierwszy element em będzie miał zielony kolor pisma, ponieważ jest dzieckiem elementu div.

Drugi element em jest potomkiem, ale nie dzieckiem, elementu div, wi─Öc nie zostanie wybrany przez ten selektor.

Selektor zawieraj─ůcy kombinator dziecka jest potocznie nazywany selektorem dziecka (ang. child selector).

Kombinator przystaj─ůcego elementu siostrzanego

Kombinator przystaj─ůcego elementu siostrzanego (ang. next-sibling combinator), maj─ůcy posta─ç znaku plusa (+), odnosi si─Ö do elementu, kt├│ry znajduje si─Ö bezpo┼Ťrednio za innym elementem na tym samym poziomie hierarchii drzewa dokumentu. Inaczej m├│wi─ůc, kombinator ten umo┼╝liwia odwo┼éanie si─Ö do elementu, kt├│ry znajduje si─Ö po innym elemencie w kodzie HTML i nie ma mi─Ödzy nimi ┼╝adnych innych element├│w, np.:

em + a {color: green}
ÔÇŽ
<p>To jest <em>tekst wymagaj─ůcy emfazy</em>, to jest wa┼╝ny tekst, a to jest <a href="/">odno┼Ťnik do strony g┼é├│wnej</a>.</p>

W tym przypadku element a będzie miał zielony kolor pisma, ponieważ między nim i elementem em nie ma żadnego innego elementu. A teraz spójrz na poniższy przykład:

em + a {color: green}
ÔÇŽ
<p>To jest <em>tekst wymagaj─ůcy emfazy</em>, to jest <strong>wa┼╝ny tekst</strong>, a to jest <a href="/">odno┼Ťnik do strony  g┼é├│wnej</a>.</p>

Teraz element a nie będzie miał zielonego koloru pisma, ponieważ między nim i elementem em znajduje się element strong.

Kombinator dowolnego elementu siostrzanego

Kombinator dowolnego elementu siostrzanego (ang. subsequent-sibling combinator), maj─ůcy posta─ç tyldy (~), jest podobny do kombinatora przystaj─ůcego elementu siostrzanego i r├│┼╝ni si─Ö od niego tym, ┼╝e aby okre┼Ťlony element zosta┼é wybrany, wystarczy ┼╝e znajduje si─Ö na tym samym poziomie hierarchii drzewa dokumentu, co inny element, tzn. mi─Ödzy dwoma interesuj─ůcymi nas elementami mog─ů znajdowa─ç si─Ö inne tak┼╝e elementy, np.:

em ~ a {color: green}
ÔÇŽ
<p>To jest <em>tekst wymagaj─ůcy emfazy</em>, to jest <strong>wa┼╝ny tekst</strong>, a to jest <a href="/">odno┼Ťnik do strony g┼é├│wnej</a>.</p>

To jest poprzedni przykład, w którym zamieniono kombinator + na ~. Dzięki temu zabiegowi teraz element a będzie miał zielony kolor pisma.

Grupowanie selektor├│w

Je┼Ťli wielu selektorom chcemy przypisa─ç taki sam zestaw deklaracji, to mo┼╝emy utworzy─ç grup─Ö tych selektor├│w w postaci listy element├│w rozdzielonych przecinkami. Blok deklaracji znajduj─ůcy si─Ö po takiej li┼Ťcie odnosi si─Ö w jednakowo do ka┼╝dego znajduj─ůcego si─Ö na niej selektora, np.:

h1, h2, h3, h3, h5, h6 {font-family: serif}

Powyższa reguła jest równoznaczna z poniższym zestawem reguł:

h1 {font-family: serif}
h2 {font-family: serif}
h3 {font-family: serif}
h4 {font-family: serif}
h5 {font-family: serif}
h6 {font-family: serif}

Jak wida─ç, pierwsza wersja jest zdecydowanie bardziej zwi─Öz┼éa. Przed i za przecinkami mog─ů, ale nie musz─ů, znajdowa─ç si─Ö spacje.

Precyzja selektor├│w

Kiedy przegl─ůdarka napotka dwie deklaracje CSS, kt├│re wzajemnie si─Ö wykluczaj─ů, tzn. definiuj─ů t─Ö sam─ů w┼éasno┼Ť─ç dla tego samego elementu, ale o r├│┼╝nych warto┼Ťciach, musi wybra─ç jedn─ů z nich. Sp├│jrz na poni┼╝szy przyk┼éad:

div p {color: green}
p {color: red}
...
<div><p>Tekst</p></div>

W tym przypadku tekst akapitu b─Ödzie zielony, poniewa┼╝ selektor div p bardziej precyzyjnie okre┼Ťla, do czego si─Ö odnosi, ni┼╝ selektor p.

Og├│lnie za wyb├│r deklaracji w┼éasno┼Ťci dla element├│w w CSS odpowiada algorytm wyboru warto┼Ťci CSS dla element├│w przegl─ůdarki. Jednym z jego element├│w jest tak┼╝e analiza precyzji selektor├│w. Szczeg├│┼éowy opis tego zagadnienia znajduje si─Ö w rozdziale Kaskada CSS w podrozdziale Precyzja selektor├│w.