← Lekcje
CSS · lekcja 02

Selektory CSS

Do którego elementu trafia reguła i kto wygrywa, gdy dwie reguły mówią co innego

  1. Cztery podstawowe selektory: typ, klasa, id, uniwersalny
  2. Łączenie kilku selektorów przecinkiem
  3. Kaskada: kto wygrywa, gdy style się kłócą
  4. Ćwiczenie: selektory w Waszym pliku style.css
Rozgrzewka · 3 minuty

Trzy pytania z poprzedniej lekcji

  1. Z jakich elementów zawsze składa się reguła CSS?
  2. Jakim znakiem kończycie każdą deklarację wewnątrz klamer?
  3. Który sposób dołączenia CSS jest zalecany i dlaczego?
Część 1 · cztery selektory

Które selektory już znacie?

Selektor mówi, do jakiego elementu ma się dopasować styl. Jeden znacznik HTML może mieć naraz nazwę, klasę i id - pasuje do niego kilka selektorów jednocześnie.

* { } - selektor uniwersalny: pasuje do wszystkiego na stronie <p class="intro" id="lead" >Tekst</p> p { } selektor typu: cały znacznik <p> .intro { } selektor klasy: każdy element z tą klasą #lead { } selektor id: jedyny element z tym id
MDN: „A type selector is sometimes called a tag name selector or element selector” · „The case-sensitive class selector starts with a dot” · „an ID can be used only once per page” · „The universal selector is indicated by an asterisk (*). It selects everything in the document” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Basic_selectors
Część 2 · wiele selektorów naraz

Ten sam styl dla kilku selektorów

Gdy kilka różnych elementów ma wyglądać tak samo, nie piszecie tej samej reguły kilka razy. Selektory łączycie przecinkiem w jedną listę - reguła dotyczy ich wszystkich naraz.

h1, .intro {
  color: blue;
}

Spacja przed przecinkiem albo po nim nie ma znaczenia. Każdy selektor może stać w osobnej linii - dla czytelności, nie dla działania kodu.

MDN: „If you want to apply the same CSS to multiple items, you can combine individual selectors into a selector list. The rule is then applied to all the individual selectors” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Basic_selectors
Część 3 · selektor na drzewie dokumentu

Do którego elementu trafia ten selektor?

Dokument HTML to drzewo zagnieżdżonych elementów. Selektor .intro nie patrzy na to, gdzie element stoi w drzewie - trafia w każdy element z tą klasą, niezależnie od miejsca.

Selektor .intro na drzewie dokumentu body header main footer p#lead p.intro ✓ p
MDN, „Basic_selectors”
Część 4 · kto wygrywa

Gdy style się kłócą

Czasem dwie reguły CSS mówią co innego o tym samym elemencie. Wygrywa ta z większą wagą: styl wbudowany style="" bije wszystko, potem #id, potem .class, na końcu sam typ znacznika.

Malejąca waga selektorów style="..." - styl wbudowany na elemencie #lead - selektor id .intro - selektor klasy p - typ znacznika malejąca waga

Ciekawostka z MDN: selektor uniwersalny * ma wagę zero, mimo że pasuje do każdego elementu na stronie. Dlatego przegrywa nawet z najprostszym selektorem typu, np. regułą p { color: blue; }.

MDN: „a million class selectors combined would not be able to overwrite the specificity of one id selector” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts · ciekawostka: developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity
Część 5 · przykład krok po kroku

Sprawdźmy to na przykładzie

<p id="lead" class="intro">Tekst</p>
p { color: black; }
.intro { color: orange; }
#lead { color: blue; }

Ten element ma naraz typ p, klasę intro i id lead - pasują do niego wszystkie trzy reguły. Wygrywa #lead, bo selektor id ma największą wagę spośród tych trzech: tekst będzie niebieski.

MDN, „Handling_conflicts”
CSS · egzamin

Tak pytają na egzaminie

1. W języku CSS zapis selektora p > i { color: red;} oznacza, że kolorem czerwonym zostanie sformatowany

  1. każdy tekst w znaczniku <p> lub każdy tekst w znaczniku <i>
  2. każdy tekst w znaczniku <p> za wyjątkiem tych w znaczniku <i>
  3. jedynie ten tekst znacznika <p>, do którego jest przypisana klasa o nazwie i
  4. jedynie ten tekst w znaczniku <i>, który jest umieszczony bezpośrednio wewnątrz znacznika <p>

2. Który selektor formatuje akapity tekstu o klasie text oraz element blokowy o ID images?

  1. p.text, div#images
  2. p#text, div.images
  3. p.text + div#images
  4. p#text + div.images
CKE, EE.09 czerwiec 2021, zad. 32 · CKE, EE.09 styczeń 2021, zad. 29
Ćwiczenie · przy komputerze · 20 minut

Ćwiczenie: selektory w Waszym CSS

  1. W style.css napisz regułę z selektorem typu, np. p { line-height: 1.4; }.
  2. Dodaj class="note" do dwóch elementów, potem dodaj regułę .note { color: orange; }.
  3. Dodaj id="header" do jednego elementu i regułę #header { ... }.
  4. Dodaj * { margin: 0; padding: 0; }, żeby wyzerować odstępy.
  5. Zapisz plik, wciśnij F5 i sprawdź wynik w przeglądarce.

Ma się pojawić: inny styl akapitów, inny kolor elementów z klasą, osobny wygląd elementu z id, brak domyślnych marginesów.

Pytania kontrolne

Trzy pytania na koniec

  1. Czym różni się selektor klasy od selektora id?
  2. Co zaznacza selektor uniwersalny *?
  3. Który selektor wygrywa, gdy na ten sam element działają #lead i .intro?

To domyka start z CSS: na następnej lekcji kolor i tekst.

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcjiW produkcjiStatus
Selektor po #idMetodyki nazewnictwa klas CSS, takie jak BEM (ang. Block Element Modifier), celowo unikają id w CSS: zbyt duża waga utrudnia późniejsze nadpisanie stylu.unikane
Liczenie wagi selektorów w głowieNarzędzia deweloperskie przeglądarki (F12 → zakładka Styles) pokazują wprost, która reguła wygrała i dlaczego.narzędzia
Jedna reguła * zerująca marginesyW dużych projektach zamiast jednej reguły używa się gotowego pliku reset albo normalize, zerującego dziesiątki właściwości naraz.rozbudowane
Kilka reguł w jednym style.cssDeklaracja !important wymusza wygraną regułę mimo niższej wagi; w produkcji traktowana jako ostateczność, bo psuje przewidywalność kaskady.unikane