Kurs HTML

Wprowadzenie: Grupowanie elementów do stylizowania

Selektory typu pozwalają stylizować wszystkie elementy danego rodzaju, ale co jeśli chcemy zastosować te same style tylko do niektórych paragrafów, nagłówków lub innych elementów, niezależnie od ich typu? Tutaj z pomocą przychodzą **selektory klas**.

Selektor klasy jest jednym z **najważniejszych i najczęściej używanych** selektorów w CSS. Pozwala on na zdefiniowanie stylu dla grupy elementów, którym nadaliśmy wspólną nazwę klasy za pomocą atrybutu class w HTML.

Składnia

W HTML, aby przypisać element do danej klasy, używamy atrybutu class:

<p class="informacja">To jest ważna informacja.</p>
<div class="informacja warning">To jest ostrzeżenie.</div>
<span class="highlight">Wyróżniony tekst.</span>Kopiuj

Zauważ, że jeden element może mieć przypisane **wiele klas**, oddzielonych spacjami (jak w drugim przykładzie: class="informacja warning").

W CSS, aby wybrać elementy na podstawie ich klasy, używamy **kropki (.)** bezpośrednio przed nazwą klasy:

/* Styl dla wszystkich elementów z klasą 'informacja' */
.informacja {
  background-color: lightblue;
  border: 1px solid blue;
  padding: 10px;
}

/* Styl dla wszystkich elementów z klasą 'warning' */
.warning {
  background-color: lightcoral;
  border-color: red;
  font-weight: bold;
}

/* Styl dla wszystkich elementów z klasą 'highlight' */
.highlight {
  background-color: yellow;
}Kopiuj

W powyższym przykładzie:

• Pierwszy paragraf (<p class="informacja">) otrzyma style z reguły .informacja.
• Drugi div (<div class="informacja warning">) otrzyma style zarówno z reguły .informacja, jak i z reguły .warning (jeśli wystąpią konflikty, zostaną rozwiązane zgodnie z zasadami specyficzności i kolejności).
• Trzeci span (<span class="highlight">) otrzyma style z reguły .highlight.

Łączenie selektora klasy z selektorem typu

Można również tworzyć bardziej specyficzne selektory, łącząc selektor typu z selektorem klasy. Wybierze to tylko elementy danego typu, które mają określoną klasę.

/* Styl tylko dla elementów  z klasą 'informacja' */
p.informacja {
  font-style: italic;
}

/* Styl tylko dla elementów 
 z klasą 'warning' */
div.warning {
  margin-bottom: 20px;
}Kopiuj
Kopiuj

W tym przypadku, styl font-style: italic; zostanie zastosowany tylko do paragrafów z klasą informacja, a nie do innych elementów (np. divów) z tą samą klasą.

Specyficzność selektora klasy

Selektor klasy ma wyższą specyficzność niż selektor typu i selektor uniwersalny. W notacji specyficzności (A, B, C, D), selektor klasy ma wartość (0, 0, 1, 0).

• Jest bardziej specyficzny niż selektor typu (0,0,0,1) i selektor uniwersalny (0,0,0,0).
• Jest mniej specyficzny niż selektor ID (0,1,0,0).

Łączenie selektora typu z klasą (np. p.informacja) zwiększa specyficzność do (0, 0, 1, 1).

Zastosowania i dobre praktyki

• Reużywalne komponenty: Klasy są podstawowym narzędziem do tworzenia reużywalnych stylów dla komponentów interfejsu użytkownika (np. przyciski, karty, alerty). Definiujesz styl dla klasy (np. .przycisk) i możesz go zastosować do dowolnego elementu HTML, który ma pełnić rolę przycisku.
• Modyfikatory: Używaj dodatkowych klas do modyfikowania wyglądu lub stanu komponentu (np. .przycisk jako styl bazowy, .przycisk--duzy lub .przycisk--danger jako modyfikatory). Jest to podstawa metodologii BEM.
• Znaczące nazwy klas: Nadawaj klasom nazwy, które opisują **znaczenie lub funkcję** elementu (np. .wiadomosc-ostrzegawcza, .profil-uzytkownika, .glowna-nawigacja), a nie jego wygląd (np. .czerwony-tekst, .duzy-margines). Stylizowanie oparte na znaczeniu jest bardziej elastyczne i łatwiejsze w utrzymaniu.
• Unikaj nadużywania: Nie twórz klasy dla każdego drobnego stylu. Wykorzystuj dziedziczenie i kombinatory selektorów tam, gdzie to możliwe.
• Konwencje nazewnictwa: W projektach często stosuje się konwencje nazewnictwa klas, takie jak BEM (Block, Element, Modifier) czy OOCSS, aby zapewnić spójność i uniknąć konfliktów nazw.