Selektor typu
Wybiera wszystkie elementy o podanej nazwie znacznika, na przykład każdy akapit p albo każdy punkt listy li.
Przykład
#h2 {
margin: 0 0 6px;
font-size: 20px;
}
p {
margin: 0 0 8px;
color: #a1a1aa;
}
a {
color: #c4b5fd;
text-underline-offset: 3px;
}<h2>Moduł 2: selektory</h2>
<p>Każdy akapit na stronie ma ten sam kolor i odstęp.</p>
<p>Każdy <a href="#">link</a> jest fioletowy, bez dopisywania klas.</p>Definicja i zastosowanie
#Selektor typu to sama nazwa znacznika HTML, bez kropki, krzyżyka ani nawiasów. Reguła p { … } trafi w każdy akapit na stronie, a li { … } w każdy punkt każdej listy, bez względu na to, gdzie leżą w dokumencie. W dokumentach HTML wielkość liter w nazwie nie ma znaczenia, więc P i p oznaczają to samo.
Ma niską specyficzność, (0, 0, 1), więc przegrywa z każdą klasą i każdym identyfikatorem. Dzięki temu świetnie nadaje się do stylów bazowych, takich jak odstępy akapitów, wygląd linków czy rozmiary nagłówków, które klasy nadpiszą bez walki.
Selektor typu możesz łączyć z innymi częściami selektora: p.lead to akapit z klasą lead, input[type="email"] to pole na adres e-mail. Nazwa znacznika zawsze stoi wtedy na początku, przed klasą czy atrybutem.
Uważaj na zbyt szerokie reguły. Styl nadany samemu div albo span dotknie setek elementów, także w miejscach, o których nie myślisz. Wygląd konkretnych części strony lepiej nadawać klasami.
Składnia
#znacznik { właściwość: wartość; }Przykładowe selektory
#- Wszystkie akapity naraz: oba elementy
<p>dostają fioletowe tło. - Każdy punkt listy, niezależnie od tego, w której liście stoi.
- Wszystkie linki. To dobre miejsce na wspólny kolor i podkreślenie linków na całej stronie.
- Wielkie litery też zadziałają, bo w HTML nazwy znaczników nie rozróżniają wielkości liter. Przyjęło się jednak pisać małymi.
Przykładowe selektory w praktyce
#p
<p> dostają fioletowe tło.p { background: #7c3aed; color: #fff; }li
li { background: #7c3aed; color: #fff; }a
a { background: #7c3aed; color: #fff; }H3
H3 { background: #7c3aed; color: #fff; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Style oparte na selektorach typu trzymaj na początku arkusza jako bazę. Wygląd konkretnych komponentów nadawaj klasami, które łatwo nadpisać i przenieść.
- Nie stylizuj ogólnych znaczników w rodzaju
divczyspan. Nie niosą żadnego znaczenia, więc reguła trafi w przypadkowe miejsca. - Selektor typu łącz z klasą tylko wtedy, gdy klasa ma działać wyłącznie na jednym znaczniku, na przykład
button.link. W pozostałych przypadkach sama klasa jest elastyczniejsza.
Powiązane hasła
#- .klasaWybiera elementy, które mają podaną klasę w atrybucie class. Najczęściej używany selektor do stylowania komponentów.
- *Gwiazdka pasuje do każdego elementu. Służy do resetów stylów i reguł dla wszystkich dzieci wybranego kontenera.
- A BSpacja między selektorami wybiera elementy B leżące gdziekolwiek wewnątrz elementu A, na dowolnej głębokości.
- A, BPrzecinek łączy kilka selektorów w jedną regułę, żeby nadać im te same style bez powtarzania deklaracji.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.