Selektory typu (elementu) w CSS - Kurs CSS od Podstaw

2.2. Selektory typu (elementu)

Strona główna > Kurs CSS > Rozdział 2: Podstawowe Selektory CSS > Selektory typu (elementu)

Wprowadzenie: Stylizowanie według rodzaju elementu

Jednym z najprostszych i najczęściej używanych selektorów w CSS jest **selektor typu**, znany również jako **selektor elementu** lub **selektor tagu**. Pozwala on na wybranie i ostylowanie wszystkich elementów HTML określonego typu (czyli o określonej nazwie znacznika).

Jeśli chcesz na przykład, aby wszystkie paragrafy (<p>) na Twojej stronie miały ten sam kolor tekstu, albo wszystkie nagłówki drugiego poziomu (<h2>) miały określony rozmiar czcionki, użyjesz właśnie selektora typu.

Składnia

Składnia selektora typu jest bardzo prosta – to po prostu nazwa znacznika HTML, którego elementy chcemy wybrać, bez żadnych dodatkowych znaków.

/* Styl dla wszystkich elementów  */
p {
  color: #333;
  line-height: 1.5;
}

/* Styl dla wszystkich elementów  */
h1 {
  font-size: 2.5em;
  color: darkblue;
  border-bottom: 2px solid darkblue;
}

/* Styl dla wszystkich elementów  (elementów listy) */
li {
  margin-bottom: 5px;
}

/* Styl dla wszystkich elementów  (linków) */
a {
  color: teal;
  text-decoration: none; /* Usunięcie domyślnego podkreślenia */
}

W powyższych przykładach, reguły CSS zostaną zastosowane odpowiednio do wszystkich paragrafów, wszystkich nagłówków H1, wszystkich elementów list i wszystkich linków na stronie.

Specyficzność selektora typu

Selektor typu ma niską, ale niezerową specyficzność. W notacji specyficzności (A, B, C, D), selektor typu ma wartość (0, 0, 0, 1). Oznacza to, że:

Jest bardziej specyficzny niż selektor uniwersalny (*) i style dziedziczone.
Jest mniej specyficzny niż selektor klasy (.klasa), selektor atrybutu ([atrybut]), pseudoklasa (:hover) czy selektor ID (#id).

* { 
  color: red; /* Specyficzność: 0,0,0,0 */
}

p {
  color: blue; /* Specyficzność: 0,0,0,1 - nadpisze czerwień dla  */
}

.moj-paragraf {
  color: green; /* Specyficzność: 0,0,1,0 - nadpisze niebieski dla  */
}

#unikalny-paragraf {
  color: purple; /* Specyficzność: 0,1,0,0 - nadpisze zielony dla  */
}

Selektory typu są często używane do definiowania podstawowych, domyślnych stylów dla standardowych elementów HTML, które następnie mogą być modyfikowane przez bardziej specyficzne selektory (klasy, ID).

Zastosowania i dobre praktyki

Definiowanie bazowych stylów: Używaj selektorów typu do ustawiania domyślnego wyglądu dla podstawowych elementów HTML, takich jak body, p, h1-h6, ul, li, a. Zapewnia to spójny punkt wyjścia dla całej witryny.
Unikaj nadmiernego stylizowania: Nie stylizuj każdego możliwego elementu HTML za pomocą selektora typu, jeśli nie jest to konieczne. Lepiej polegać na dziedziczeniu i bardziej specyficznych selektorach (głównie klasach) do tworzenia konkretnych komponentów interfejsu.
Resetowanie/Normalizacja: Selektory typu są kluczowe w resetach CSS (jak ten z użyciem *) lub normalizacjach (jak Normalize.css), które mają na celu ujednolicenie domyślnych stylów przeglądarek dla różnych elementów.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz plik HTML z kilkoma linkami (<a href="...">). Użyj selektora typu a w pliku CSS, aby usunąć domyślne podkreślenie linków i ustawić ich kolor na pomarańczowy (orange).

Rozwiązanie:

Plik HTML (np. index.html):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zadanie 1 - Selektor Typu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Odwiedź <a href="#">stronę główną</a> lub <a href="#">kontakt</a>.</p>
    <a href="#">Inny link</a>
</body>
</html>

Plik CSS (style.css):

a {
  text-decoration: none; /* Usunięcie podkreślenia */
  color: orange;         /* Ustawienie koloru */
}

Efekt: Wszystkie linki na stronie będą pomarańczowe i nie będą miały podkreślenia.

Zadanie 2 (do samodzielnego wykonania)

W pliku HTML dodaj kilka nagłówków różnego poziomu (<h1>, <h2>, <h3>). Użyj selektorów typu, aby ustawić różne kolory dla każdego poziomu nagłówka (np. h1 na niebieski, h2 na zielony, h3 na fioletowy).

Zadanie 3 (do samodzielnego wykonania)

Użyj selektora typu body, aby ustawić domyślną rodzinę czcionek (font-family) dla całej strony na "Arial, sans-serif" oraz kolor tła (background-color) na bardzo jasny szary (np. #fafafa).

FAQ - Najczęściej zadawane pytania

Czy selektor typu wybiera elementy niezależnie od ich położenia w drzewie DOM?

Tak, prosty selektor typu (np. p) wybierze wszystkie elementy danego typu, niezależnie od tego, gdzie się znajdują w strukturze dokumentu HTML (czy są w nagłówku, stopce, sekcji bocznej itp.).

Czy mogę stylizować własne, niestandardowe tagi HTML za pomocą selektora typu?

HTML5 pozwala na tworzenie niestandardowych elementów (Custom Elements), ale ich stylizowanie za pomocą selektora typu może wymagać dodatkowych kroków (np. rejestracji elementu przez JavaScript). Standardowe, nieznane przeglądarce tagi są zazwyczaj traktowane jako elementy typu `inline` i można je stylizować, ale semantycznie lepiej używać standardowych tagów lub klas.

Jak selektor typu ma się do dziedziczenia stylów?

Selektor typu definiuje style bezpośrednio dla wybranych elementów. Te style mogą być następnie dziedziczone przez elementy potomne (jeśli dana właściwość CSS jest dziedziczona, np. `color`, `font-family`). Style zdefiniowane za pomocą selektora typu nadpiszą style odziedziczone z elementu nadrzędnego.

Czy używanie selektorów typu jest wydajne?

Tak, selektory typu są zazwyczaj bardzo wydajne. Przeglądarki są zoptymalizowane pod kątem szybkiego wyszukiwania elementów na podstawie ich nazwy tagu. Problemy z wydajnością mogą pojawić się przy bardzo złożonych selektorach lub nadmiernym użyciu selektora uniwersalnego, ale proste selektory typu są szybkie.

Kurs HTML