HTML I CSS · INF.03 · MODUŁ 07

CSS — selektory, kaskada i specyficzność

CSS to nie lista przypadkowych właściwości. To system reguł — poznasz kolejność, która decyduje o wyglądzie.

Wprowadzenie

CSS opisuje wygląd dokumentu HTML. Nie jest listą przypadkowych właściwości, ale zbiorem reguł: selektor wskazuje elementy, a deklaracje mówią, jak je pokazać. Gdy kilka reguł dotyczy tego samego elementu, przeglądarka musi wybrać tę, która ma pierwszeństwo. Ten mechanizm nazywamy kaskadą.

Style można podłączyć na trzy sposoby. Zewnętrzny plik przez <link rel="stylesheet" href="style.css"> jest najlepszy w większym projekcie, bo jedna poprawka działa na wszystkich stronach. Blok <style> w nagłówku nadaje się do krótkich, lokalnych reguł. Atrybut style na elemencie działa natychmiast, ale miesza treść z wyglądem i ma bardzo wysoką specyficzność.

<!-- 1. wspólny plik zewnętrzny -->
<link rel="stylesheet" href="style.css">

<!-- 2. blok stylów w nagłówku -->
<style>
  p { color: #2563eb; }
</style>

<!-- 3. styl wpisany w element -->
<p style="color: #dc2626;">Akapit</p>

Selektor może wskazywać element (p), klasę (.karta), identyfikator (#wyroznik), atrybut ([type="email"]), stan (:hover, :focus) albo część elementu (::before). Selektory można łączyć: nav > a wybiera linki będące bezpośrednimi dziećmi nawigacji, a .karta p — akapity wewnątrz karty.

Gdy reguły się kłócą, przeglądarka porównuje ich specyficzność, a przy remisie — kolejność zapisu. Osobno działa dziedziczenie: niektóre właściwości, na przykład kolor tekstu, przechodzą z rodzica na dziecko, jeśli dziecko nie ma własnej reguły.

Najważniejsza własność

Kaskada rozstrzyga konflikt w trzech krokach. Najpierw liczy się pochodzenie i waga deklaracji, potem specyficzność selektora, a na końcu kolejność w arkuszu. W zwykłym projekcie najczęściej porównujemy właśnie specyficzność, bo wszystkie reguły pochodzą z tego samego arkusza autora.

Punkty sumują się w obrębie jednego selektora. Zapis div.karta p ma 1 + 10 + 1 = 12 punktów, a #main .karta — 100 + 10 = 110. Kombinatory (>, +, ~, spacja) nie dodają punktów, podobnie jak uniwersalny selektor *.

Deklaracja z !important wygrywa ze zwykłymi deklaracjami, nawet jeśli te mają identyfikator. Gdy dwie deklaracje są oznaczone jako ważne, znów rozstrzyga specyficzność. To narzędzie awaryjne: utrudnia późniejsze poprawki i zaciemnia obraz kaskady, więc stosuj je wyjątkowo.

p { color: #2563eb; }        /* 1 pkt */
.uwaga { color: #16a34a; }   /* 10 pkt */
#glowny { color: #7c3aed; }  /* 100 pkt */

Dla akapitu <p id="glowny" class="uwaga"> wygrywa reguła #glowny, bo 100 punktów to więcej niż 10 i 1. Kolor będzie fioletowy. Dopiero styl wpisany bezpośrednio w elemencie (1000 punktów) zmieniłby wynik na czerwony.

Dziedziczenie działa inaczej niż kaskada. Właściwości tekstowe, takie jak color, font-family i line-height, przechodzą z rodzica na dziecko. Właściwości układu, takie jak margin, padding, border i width, nie są dziedziczone. Ważna zasada: wartość odziedziczona przegrywa z każdą regułą, która bezpośrednio trafia w element — nawet z selektorem uniwersalnym o zerowej specyficzności.

Ważne — nie styluj identyfikatorem. Id zostaw do kotwic i skryptów. Do wyglądu używaj klas, bo można je powtarzać i łatwiej je nadpisać. Selektor #wyroznik ma 100 punktów i potem trudno go przewalczyć bez !important.

p { color: #2563eb; }
.uwaga { color: #16a34a; }
#glowny { color: #7c3aed; }

<p id="glowny" class="uwaga">Tekst</p>

p        { color: #2563eb; }   /* 1 pkt */
.uwaga   { color: #16a34a; }   /* 
      — wybierz —
      1
      10
      100
      1000
     pkt */
#glowny  { color: #7c3aed; }   /* 
      — wybierz —
      1
      10
      100
      1000
     pkt */
<p style="color: #dc2626;">  /* 
      — wybierz —
      1
      10
      100
      1000
     pkt */

Przykłady

Przykład 1 — element, klasa i id w praktyce

Zbuduj trzy karty. Każda ma inne oznaczenie, ale wszystkie są tym samym elementem. Sprawdź, która reguła nadaje kolor ramki i tła.

HTML

<div class="lista">
  <article class="box">
    <span class="tag">article</span>
    <h3>Element</h3>
    <p>Reguła <code>article</code> trafia w każdy taki element.</p>
  </article>

  <article class="box karta">
    <span class="tag">.karta</span>
    <h3>Klasa</h3>
    <p>Reguła <code>.karta</code> działa tylko na elementy z tym atrybutem.</p>
  </article>

  <article class="box karta" id="wyroznik">
    <span class="tag">#wyroznik</span>
    <h3>Id</h3>
    <p>Reguła <code>#wyroznik</code> wskazuje dokładnie jeden element.</p>
  </article>
</div>

CSS

.box {
  padding: 18px 20px;
  border-width: 3px;
  border-style: solid;
  border-radius: 12px;
}

/* 1 punkt — element */
article { border-color: #2563eb; background: #eff6ff; }

/* 10 punktów — klasa */
.karta { border-color: #16a34a; background: #f0fdf4; }

/* 100 punktów — id */
#wyroznik { border-color: #7c3aed; background: #f5f3ff; }

podgląd w przeglądarce

1. Reguła article trafia we wszystkie trzy karty, więc początkowo każda ma niebieską ramkę i jasnoniebieskie tło.
2. Reguła .karta ma 10 punktów i wygrywa z elementem. Dwie karty z tą klasą robią się zielone.
3. Reguła #wyroznik ma 100 punktów. Wygrywa z klasą, więc trzecia karta jest fioletowa.
4. Id nie powtarzaj na kilku elementach. Do wielokrotnego stylu używaj klasy, a id zostaw dla jednego wyjątku, kotwicy albo skryptu.

Wynik: karta elementu jest niebieska, karta klasy zielona, a karta z id fioletowa. Wygrywa reguła o najwyższej specyficzności.

Przykład 2 — hover, focus, ::before i ::after

Zbuduj przycisk reagujący na mysz, pole tekstowe z widocznym fokusem, cytat z ozdobnymi cudzysłowami i własny checkbox. Wszystko bez JavaScriptu.

HTML

<a class="akcja" href="#">Zapisz zmiany</a>

<input class="pole" type="text" value="ala@example.com" autofocus>

<blockquote class="cytat">Dobry styl zaczyna się od czytelnego kodu.</blockquote>

<label class="wybor">
  <input type="checkbox" checked>
  <span class="znacznik" aria-hidden="true"></span>
  <span class="tekst">Zapamiętaj wybór</span>
</label>

CSS

.akcja:hover { background: #1d4ed8; }
.akcja:focus-visible { outline: 3px solid #f59e0b; }

.pole:focus {
  border-color: #2563eb;
  outline: 3px solid #bfdbfe;
}

.cytat::before {
  content: "„";
  position: absolute;
  top: 2px;
  left: 10px;
}

.cytat::after {
  content: "”";
  position: absolute;
  right: 12px;
  bottom: -4px;
}

.wybor input:checked + .znacznik {
  border-color: #16a34a;
  background: #16a34a;
}

.wybor input:checked + .znacznik::after {
  content: "";
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

podgląd w przeglądarce

1. :hover to pseudo-klasa. Reguła działa tylko wtedy, gdy wskaźnik znajduje się nad elementem. Nie zastępuj nią informacji, bez której strona przestaje być zrozumiała.
2. :focus pokazuje, że element ma fokus. :focus-visible jest bezpieczniejszy dla przycisków, bo przeglądarka pokazuje obwódkę głównie przy nawigacji klawiaturą.
3. ::before i ::after to pseudo-elementy. Tworzą dodatkową treść przed elementem i po nim. Wymagają właściwości content, nawet jeśli jest to pusty napis.
4. Własny checkbox ukrywa oryginalny input, ale zostawia go dostępnym. Kolejny element .znacznik rysuje kwadrat, a :checked zmienia jego wygląd. Nie usuwaj fokusu bez zamiennika.

Wynik: przycisk ciemnieje po najechaniu, pole dostaje niebieską obwódkę, cytat ma cudzysłowy z CSS, a checkbox jest zielony i zaznaczony.

Przykład 3 — pojedynek specyficzności

Ten sam akapit opisują cztery reguły: element, klasa, id i styl inline. Sprawdź, który kolor rzeczywiście się pokaże, i porównaj punkty.

HTML

<p id="zwyciezca" class="zdanie" style="color: #dc2626;">
  Ten tekst jest czerwony, bo wygrywa styl inline.
</p>

CSS

p { color: #2563eb; }         /* 1 pkt */
.zdanie { color: #16a34a; }   /* 10 pkt */
#zwyciezca { color: #7c3aed; } /* 100 pkt */
/* styl inline: 1000 pkt */

podgląd w przeglądarce

1. Reguła p ma 1 punkt i ustawia kolor niebieski.
2. Klasa .zdanie ma 10 punktów, więc wygrywa z elementem i daje kolor zielony.
3. Id #zwyciezca ma 100 punktów i wygrywa z klasą. Bez stylu inline tekst byłby fioletowy.
4. Styl inline ma 1000 punktów. To najwyższa wartość w tym pojedynku, dlatego tekst jest czerwony. Gdyby usunąć atrybut style, wygrałoby id.

Wynik: widoczny jest kolor #dc2626 ze stylu inline. Kolejność reguł w arkuszu nie zmienia wyniku, bo różnią się specyficznością.

Spróbuj samodzielnie

Rozwiąż zadania samodzielnie, a dopiero potem rozwiń rozwiązanie. W każdym zadaniu nazwij selektor, policz punkty i sprawdź, czy nie da się zastąpić id zwykłą klasą.

p { color: #2563eb; }
.uwaga { color: #16a34a; }
#glowny { color: #7c3aed; }

<p id="glowny" class="uwaga" style="color: #dc2626;">Tekst</p>

1. Dobierz selektory: (a) wszystkie akapity wewnątrz elementu article, (b) tylko elementy z klasą wyroznik, (c) dokładnie jeden element z identyfikatorem stopka.

   Pokaż rozwiązanie

   (a) article p — element potomny, bez względu na głębokość. (b) .wyroznik — kropka oznacza klasę, którą można powtórzyć na wielu elementach. (c) #stopka — krzyżyk oznacza identyfikator, który powinien wystąpić tylko raz w dokumencie.

   Gdyby akapit miał być bezpośrednim dzieckiem, użyłbyś article > p. To nie to samo co article p, bo selektor dziecka nie zejdzie głębiej.

2. Policz specyficzność selektorów: nav a, .karta p, #main .karta oraz a[href]:hover.

   Pokaż rozwiązanie

   nav a — dwa elementy, 2 punkty. .karta p — klasa 10 i element 1, razem 11. #main .karta — id 100 i klasa 10, razem 110. a[href]:hover — element 1, atrybut 10 i pseudo-klasa 10, razem 21.

   Kombinator spacji nie dodaje punktów. Liczy się tylko to, co stoi po obu jego stronach.

3. Uczeń napisał #karta { color: red; } i użył id="karta" na pięciu kartach. Wskaż dwa problemy i popraw kod tak, aby styl działał na wszystkie karty, ale nie podnosił niepotrzebnie specyficzności.

   Pokaż rozwiązanie

   Pierwszy problem: identyfikator musi być unikalny w dokumencie, więc nie można powtarzać id="karta" na pięciu elementach. Drugi problem: selektor id ma 100 punktów i trudno go później nadpisać.

   Poprawka: zamień identyfikator na klasę. W HTML użyj class="karta" na każdej karcie, a w CSS zapisz .karta { color: #dc2626; }. Klasa ma 10 punktów, może się powtarzać i łatwiej ją rozbudować o stan :hover.

4. Kolega chce „naprawić” wygląd, dopisując !important do co drugiej reguły. Wyjaśnij, dlaczego to zły pomysł, i podaj przykład sytuacji, w której !important może być uzasadnione.

   Pokaż rozwiązanie

   !important wyrywa deklarację z normalnej kaskady. Późniejsze poprawki przestają działać, bo trzeba dodawać kolejne !important, a kod staje się trudny do przewidzenia. Zamiast tego uporządkuj selektory: usuń zbędne id, skróć ścieżki i wykorzystaj klasy.

   Uzasadnione użycie to mały, lokalny wyjątek, na przykład nadpisanie pojedynczej właściwości w gotowym widżecie zewnętrznym albo wymuszenie stylu w wydruku. Nawet wtedy warto dopisać komentarz, dlaczego reguła musi być ważna.