Selektory w CSS

1. Selektory podstawowe

Selektory to „wskazówki” w CSS, które określają do jakich elementów HTML mają być zastosowane style. Najczęściej używane są trzy podstawowe typy:

a) Selektory tagów (typów)

Odnoszą się do wszystkich elementów danego rodzaju. Przykład:

Wszystkie akapity <p> na stronie będą miały niebieski tekst.

b) Selektory klas

Używane do grupowania wielu elementów w celu nadania im wspólnego wyglądu.

  • W HTML: class="nazwa"
  • W CSS: .nazwa

Przykład:

Każdy element z class="button" otrzyma zielone tło i biały tekst.

c) Selektory identyfikatorów (ID)

Używane do unikalnych elementów na stronie.

  • W HTML: id="nazwa"
  • W CSS: #nazwa

Przykład:

Tylko element z id="header" otrzyma jasno-niebieskie tło.

❗ Uwaga: ID powinno być unikalne w całym dokumencie – stosujemy je rzadziej niż klasy.

2. Selektory złożone

Pozwalają tworzyć bardziej precyzyjne reguły.

a) Potomkowie (descendant selectors)

Selektor A B wybiera element B znajdujący się wewnątrz A.

Wszystkie akapity <p> wewnątrz <div> będą czerwone.

b) Dziecko (child selector)

Selektor A > B wybiera element B, który jest bezpośrednim dzieckiem A.

Tylko bezpośrednie elementy <li> w <ul> dostaną kwadratowe punktor.

c) Rodzeństwo (sibling selectors)

  • Natychmiastowy brat (adjacent sibling) – A + B wybiera element B, który występuje zaraz po A.
  • Ogólny brat (general sibling) – A ~ B wybiera wszystkie elementy B, które są rodzeństwem A.

Przykład:

Pierwszy akapit po nagłówku <h2> będzie szary.

d) Selektory atrybutów

Pozwalają stylować elementy na podstawie wartości atrybutów HTML.

Przykłady:

3. Specyficzność i kolejność stylów

Jeśli do jednego elementu pasuje wiele reguł CSS, przeglądarka musi zdecydować, która z nich ma pierwszeństwo.

a) Specyficzność (specificity)

To hierarchia ważności selektorów:

  • Styl inline (w atrybucie style) → najwyższy priorytet.
  • ID (#id) → wysoki priorytet.
  • Klasy, atrybuty, pseudoklasy (.class, [attr], :hover) → średni priorytet.
  • Tagi i pseudoelementy (p, h1, ::before) → najniższy priorytet.
  • Dziedziczenie – nie wszystkie właściwości dziedziczą się automatycznie.

Przykład (rosnąca siła):

b) Kolejność reguł (cascade)

Jeśli dwie reguły mają tę samą specyficzność, decyduje kolejność ich zapisu – ostatnia reguła nadpisuje poprzednią.

Przykład:

Tekst akapitów będzie czerwony, bo druga reguła nadpisuje pierwszą.

c) !important

Deklaracja !important nadaje najwyższy priorytet regule – nadpisuje nawet inline style.

Wszystkie akapity będą zielone, niezależnie od innych reguł.

❗ Jednak nadużywanie !important powoduje chaos w kodzie i utrudnia późniejsze modyfikacje.

4. Dziedziczenie w CSS

Wiele właściwości w CSS jest dziedziczonych – elementy potomne przejmują wartości stylów od elementu nadrzędnego.

a) Przykład dziedziczenia

Wszystkie elementy w dokumencie domyślnie odziedziczą czcionkę Arial i czarny kolor tekstu.

b) Właściwości, które się dziedziczą

  • color,
  • font-family, font-size, font-style,
  • line-height,
  • text-align, visibility.

c) Właściwości, które NIE dziedziczą się automatycznie

  • margin, padding, border,
  • background,
  • width, height, display,
  • position, float.

d) Wymuszanie dziedziczenia

Możemy wymusić dziedziczenie przy pomocy wartości inherit:

Wróć do spisu lekcji Zadanie praktyczne Rozwiąż quiz