Selektory w CSS

Selektor w CSS to ta część reguły, która mówi, które elementy HTML mają zostać ostylowane daną deklaracją. Poznaliśmy już selektory typu element (tagu), a poniżej omówiono trzy podstawowe rodzaje selektorów oraz ich proste łączenie.

Selektor elementu (tagu)

Selektor elementu to po prostu nazwa znacznika HTML. Na przykład:

p { /* ... */ }

Ten selektor wybierze wszystkie elementy <p> na stronie i zastosuje do nich podane style. Inne przykłady: h1 { ... } dla wszystkich <h1>, li { ... } dla każdego elementu listy. Ten selektor działa globalnie dla danego typu elementu.

Selektor klasy

Selektor klasy pozwala wybrać elementy na podstawie wartości atrybutu class. W HTML możemy przypisać elementowi jedną lub więcej klas, np.:

<p class="wyróżniony">Tekst</p>

W CSS odwołujemy się do klasy poprzedzając nazwę kropką:

.wyróżniony { color: red; }

To zadziała na każdym elemencie, który w HTML ma class="wyróżniony", niezależnie od jego tagu. Klasy są podstawowym sposobem grupowania elementów pod wspólnym stylowaniem. Ważne: nazwa klasy powinna zaczynać się literą lub _ i może składać się z liter, cyfr, myślników lub podkreślników. Element może mieć też wiele klas naraz (oddzielonych spacją w atrybucie class).

Selektor identyfikatora (ID)

Selektor ID wybiera element na podstawie unikalnego identyfikatora. W HTML nadajemy elementowi atrybut id, np. id="unikat". Id w dokumencie powinno być niepowtarzalne – tylko jeden element może mieć daną wartość id. W CSS składnia selektora ID to znak kratki przed nazwą:

#unikat { background-color: yellow; }

Z powodu unikalności, selektora ID używamy do stylowania konkretnego pojedynczego elementu (np. głównego nagłówka strony o id="header"). W praktyce ID częściej służy do nawigacji (kotwice) i skryptów, ale również można go stylować — ma wyższy priorytet specyficzności niż klasa, co wpływa na kaskadę.

Łączenie selektorów (proste przypadki)

Poniżej kilka podstawowych sposobów łączenia selektorów.

Tag z klasą

Możemy łączyć selektor tagu z klasą, aby stylować elementy konkretnego typu, ale tylko te mające daną klasę. Na przykład:

p.wyróżniony { /* tylko akapity z klasą "wyróżniony" */ }

Selektory zagnieżdżone (kombinatory)

Przykład zagnieżdżonego selektora:

div p { /* wszystkie <p> znajdujące się wewnątrz dowolnego <div> */ }

Inny przykład:

nav ul li a { /* linki <a> wewnątrz <li> w <ul> w <nav> */ }

Taki selektor przydaje się, gdy chcemy precyzyjnie dobrać się do elementu w określonym kontekście (np. stylować linki w menu nawigacyjnym inaczej niż inne linki).

Grupowanie selektorów

Jeśli kilka różnych selektorów ma mieć ten sam zestaw stylów, można je połączyć przecinkiem w jednej regule. Na przykład:

h1, h2, h3 { font-family: Arial, sans-serif; }

Przykład użycia w HTML i CSS

Pamiętaj, że aby selektory klasy czy ID zadziałały, musimy w HTML odpowiednio nadać elementom te atrybuty class lub id. Przykład:

<h2 class="wyróżniony">Oferta specjalna</h2>
<p class="wyróżniony">Ten paragraf jest wyróżniony czerwonym tekstem i kursywą.</p>

.wyróżniony {
    color: red;
    font-style: italic;
}

W efekcie zarówno nagłówek <h2> jak i akapit <p> z klasą "wyróżniony" otrzymają czerwony, pochylony tekst — mimo że są różnymi tagami — ponieważ selektor .wyróżniony działa na oba elementy. To pokazuje moc CSS — jednym selektorem można stylować wiele elementów naraz.

Uwaga: Istnieją też selektory bardziej zaawansowane (atrybutów, pseudo-klas, pseudo-elementów), ale w podstawowym zakresie najczęściej korzystamy z opisanych powyżej trzech rodzajów selektorów oraz ich prostego łączenia.