Jak działają selektory w CSS?

Selektory to jeden z najważniejszych elementów CSS. Dzięki nim określasz, które elementy HTML mają być ostylowane według Twoich reguł.

Mówiąc prościej: selektory w CSS pozwalają „wybrać” elementy na stronie, aby przypisać im wygląd. Bez selektorów przeglądarka nie będzie wiedziała, które elementy mają mieć np. kolor niebieski, większą czcionkę czy inne tło.

Co to jest selektor?

Selektor w CSS określa, do których elementów HTML zastosujesz stylizację. Działa na zasadzie „wybierz ten element i nadaj mu styl”. Po selektorze zawsze znajduje się blok deklaracji, który określa reguły formatowania.

Składnia reguły CSS:

selektor {
  właściwość: wartość;
}

Rodzaje selektorów w CSS

Poniżej poznasz najważniejsze typy selektorów, które umożliwią Ci precyzyjne kontrolowanie wyglądu elementów HTML.

1. Selektor tagu (elementu)

Najprostszy selektor. Wybiera wszystkie elementy określonego typu (np. wszystkie akapity <p>, wszystkie nagłówki <h1> itd.).

p {
  color: blue;
}

Efekt:

Ten akapit ma niebieski tekst, bo został wybrany przez selektor tagu <p>.

2. Selektor klasy

Klasa pozwala wybrać jeden lub wiele elementów, które mają określoną klasę. Klasy definiujemy w HTML w atrybucie class.

W CSS zapisujemy klasę poprzedzoną kropką (.).

.niebieski-tekst {
  color: blue;
  font-weight: bold;
}

W HTML:

<p class="niebieski-tekst">Ten tekst jest niebieski i pogrubiony.</p>

Efekt:

Ten tekst jest niebieski i pogrubiony.

3. Selektor identyfikatora (ID)

ID jest unikalnym identyfikatorem elementu na stronie. Powinno być używane tylko raz na stronie HTML.

W CSS ID zapisujemy poprzedzając go znakiem hash #.

#naglowek-glowny {
  color: darkred;
  text-align: center;
}

W HTML:

<h1 id="naglowek-glowny">Witamy na stronie!</h1>

Efekt:

Witamy na stronie!

4. Grupowanie selektorów

Często chcesz zastosować te same style do kilku różnych elementów. Możesz je pogrupować, oddzielając przecinkami.

h1, h2, h3 {
  color: darkgreen;
}

Efekt:

Nagłówek H1

Nagłówek H2

Nagłówek H3

5. Selektor potomka (dziecka)

Pozwala wybrać elementy znajdujące się wewnątrz innych elementów. Na przykład: wybierasz wszystkie <em> znajdujące się w <p>.

p em {
  color: orange;
}

W HTML:

<p>To jest <em>wyróżniony tekst</em> w akapicie.</p>

Efekt:

To jest wyróżniony tekst w akapicie.

6. Selektor uniwersalny

Stosowany do wyboru wszystkich elementów na stronie. Bardzo często używany do „resetowania” marginesów i odstępów, które przeglądarka ustawia domyślnie.

* {
  margin: 0;
  padding: 0;
}

Ten selektor powoduje, że wszystkie elementy na stronie nie mają marginesów ani paddingów.

Priorytety selektorów (Specyficzność)

Kiedy kilka reguł CSS odnosi się do tego samego elementu, przeglądarka musi zdecydować, którą zastosować. Właśnie dlatego istnieje specyficzność.

• Najwyższy priorytet: selektor ID (#id).
• Średni priorytet: selektor klasy (.klasa), pseudo-klasy (np. :hover).
• Najniższy priorytet: selektor tagu (np. p).

Dodatkowo style inline (dodane bezpośrednio w atrybucie style) mają jeszcze wyższy priorytet niż selektory CSS.

Praktyczny przykład priorytetów

HTML:

<p id="tekst" class="akapit">Przykładowy tekst</p>

CSS:

p {
  color: black;
}

.akapit {
  color: blue;
}

#tekst {
  color: red;
}

Efekt:

Przykładowy tekst

Dlaczego?
Bo selektor ID ma wyższy priorytet niż klasa i tag, dlatego przeglądarka wybiera color: red;.

Podsumowanie

• Selektory pozwalają wybrać elementy HTML i przypisać im style CSS.
• Najczęściej używane selektory to: tagu, klasy i identyfikatora (ID).
• Specyficzność selektorów decyduje o tym, który styl zostanie zastosowany, gdy kilka reguł dotyczy tego samego elementu.

Ćwiczenie praktyczne – przetestuj kod w JSFiddle

Przetestuj swój kod w JSFiddle.

Krok 1: Wklej kod do sekcji HTML:

<h1 class="tytul">Nagłówek</h1>
<p class="akapit">To jest akapit.</p>
<p id="unikalny">To jest inny akapit.</p>

Krok 2: Wklej kod do sekcji CSS:

.tytul {
  color: darkblue;
  text-align: center;
}

.akapit {
  color: green;
  font-size: 18px;
}

#unikalny {
  color: crimson;
  font-style: italic;
}

Sprawdź w podglądzie:

• Nagłówek jest ciemnoniebieski i wycentrowany?
• Pierwszy akapit jest zielony i większy?
• Drugi akapit ma kolor karmazynowy i kursywę?