8. Selektory CSS

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.

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.