Selektory i dziedziczenie

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• rozpoznać i zastosować selektor elementu, klasy, ID oraz grupowania,
• łączyć selektory tak, aby stylować elementy w konkretnym kontekście,
• używać prostych pseudoklas, takich jak :hover i :focus,
• wyjaśnić, czym jest dziedziczenie i jak wpływa na organizację stylów,
• unikać częstych błędów związanych ze zbyt ogólnymi lub zbyt mocnymi selektorami.

Czym są selektory?

Selektor to część reguły CSS, która wskazuje przeglądarce, które elementy HTML mają otrzymać dane style. Dobrze dobrany selektor jest precyzyjny, ale nadal prosty do zrozumienia dla osoby, która później będzie rozwijać projekt.

selector {
  property: value;
}

Podstawowe selektory

Na start wystarczą cztery typy selektorów. To one pojawiają się najczęściej w prostych stronach i komponentach.

Selektor elementu

Wybiera wszystkie elementy danego typu. Sprawdza się przy bazowych stylach, ale łatwo działa zbyt szeroko.

p {
  color: #475569;
}

Selektor klasy

Wybiera elementy z konkretną klasą. To najbezpieczniejszy i najczęściej używany sposób stylowania komponentów.

.lesson-card {
  padding: 1rem;
  border-radius: 12px;
}

Selektor ID

Wybiera element z konkretnym identyfikatorem. ID powinno być unikalne na stronie. W CSS używaj go ostrożnie, bo ma wysoką specyficzność i może utrudniać nadpisywanie stylów.

#main-content {
  scroll-margin-top: 5rem;
}

Selektor grupowy

Pozwala przypisać te same deklaracje kilku selektorom i uniknąć powtarzania kodu.

h1,
h2,
h3 {
  line-height: 1.2;
}

Łączenie selektorów w praktyce

Selektory można łączyć, aby zawęzić zakres działania reguły do konkretnej części strony.

Selektor potomka

Spacja między selektorami oznacza: wybierz element znajdujący się gdziekolwiek wewnątrz innego elementu.

.article p {
  max-width: 65ch;
}

Ta reguła obejmie każdy akapit wewnątrz elementu z klasą article, nawet jeśli akapit jest głęboko zagnieżdżony.

Selektor dziecka

Znak > oznacza: wybierz tylko bezpośrednie dzieci danego elementu.

.menu > li {
  margin-block: 0.5rem;
}

To dobry wybór, gdy chcesz stylować tylko pierwszy poziom listy, a nie wszystkie zagnieżdżone listy.

Pseudoklasy: stan elementu

Pseudoklasa opisuje szczególny stan elementu. Dzięki niej możesz reagować na interakcje użytkownika bez pisania JavaScriptu.

Kopiuj.button:hover {
  background-color: #1d4ed8;
}

.button:focus {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

Dziedziczenie w CSS

Dziedziczenie oznacza, że niektóre właściwości ustawione na elemencie rodzica przechodzą na jego dzieci. Najczęściej dotyczy to stylów tekstu, takich jak color, font-family czy line-height.

body {
  font-family: Inter, Arial, sans-serif;
  color: #0f172a;
}

.card {
  background-color: #ffffff;
}

W tym przykładzie tekst w karcie odziedziczy krój pisma i kolor z body, ale tło karty trzeba ustawić osobno, bo background-color nie jest typową właściwością dziedziczoną.

Podstawy kaskady

Kaskada decyduje, która deklaracja wygra, gdy kilka reguł dotyczy tego samego elementu. Na początku zapamiętaj trzy proste zasady:

• bardziej szczegółowy selektor zwykle wygrywa z bardziej ogólnym,
• przy podobnej sile selektorów wygrywa reguła zapisana później,
• style z klasy są zwykle łatwiejsze do kontrolowania niż style oparte na ID.

p {
  color: #475569;
}

.text-highlight {
  color: #1d4ed8;
}

Akapit z klasą text-highlight będzie niebieski, ponieważ selektor klasy jest bardziej konkretny niż selektor elementu.

Dobre praktyki i częste błędy

• Preferuj klasy dla komponentów, np. .card, .button, .lesson-section.
• Nie styluj zbyt wielu rzeczy samym selektorem elementu, bo łatwo przypadkowo zmienić wygląd całej strony.
• Nie nadużywaj ID w CSS — trudniej je później nadpisać bez walki ze specyficznością.
• Unikaj bardzo długich łańcuchów selektorów, np. main section div ul li a. Są kruche i zależne od struktury HTML.
• Dodawaj style :focus dla elementów interaktywnych, aby strona była wygodna w obsłudze klawiaturą.

Mini zadanie

Utwórz prostą kartę artykułu z nagłówkiem, opisem i linkiem. Następnie w CSS:

• ostyluj kartę za pomocą klasy .article-card,
• ustaw wspólny kolor dla nagłówków h2 i h3 selektorem grupowym,
• dodaj styl dla linku w stanie :hover oraz :focus,
• ustaw font-family i color na body, a potem sprawdź, które elementy odziedziczyły te wartości.

Na koniec odpowiedz sobie na pytanie: które style są globalne, a które należą wyłącznie do komponentu?

Podsumowanie lekcji

Znasz już podstawowe selektory CSS, potrafisz zawężać ich działanie i rozumiesz, jak pseudoklasy wspierają interakcję. Wiesz także, że dziedziczenie pomaga ograniczać powtórzenia, a kaskada rozstrzyga konflikty między regułami.

Kolejny krok: poznaj box model, czyli sposób, w jaki przeglądarka oblicza rozmiary i odstępy elementów.