2.1. Selektor uniwersalny (*)
Wprowadzenie: Złap je wszystkie!
Rozpoczynamy naukę o selektorach CSS od jednego z najprostszych, ale jednocześnie potencjalnie potężnych (i czasem niebezpiecznych) selektorów – **selektora uniwersalnego**, reprezentowanego przez gwiazdkę (*).
Jak sama nazwa wskazuje, selektor uniwersalny **wybiera wszystkie elementy** w dokumencie HTML, niezależnie od ich typu, klasy, ID czy atrybutów.
Składnia i użycie
Składnia selektora uniwersalnego jest bardzo prosta – to po prostu znak gwiazdki:
* {
/* Deklaracje stylów stosowane do WSZYSTKICH elementów */
margin: 0;
padding: 0;
box-sizing: border-box;
}W powyższym przykładzie, reguła CSS zostanie zastosowana do każdego pojedynczego elementu na stronie HTML. Jest to często spotykany fragment kodu w tzw. "resetach CSS" lub "normalizacjach", mający na celu usunięcie domyślnych marginesów i wypełnień dodawanych przez przeglądarki oraz ustawienie spójnego modelu pudełkowego dla wszystkich elementów.
Selektor uniwersalny może być również używany w połączeniu z innymi selektorami (kombinatorami), aby wybrać wszystkie elementy będące potomkami lub rodzeństwem określonego elementu, ale o tym dowiemy się więcej w lekcjach o zaawansowanych selektorach.
/* Wybierz wszystkie elementy będące bezpośrednimi dziećmi elementu o ID 'kontener' */
#kontener > * {
border: 1px solid red;
}Specyficzność selektora uniwersalnego
Selektor uniwersalny (*) ma **zerową specyficzność** (0, 0, 0, 0). Oznacza to, że jest najmniej specyficznym selektorem i każda inna reguła z bardziej specyficznym selektorem (np. selektorem typu, klasy, ID) łatwo ją nadpisze.
* {
color: red; /* Niska specyficzność */
}
p {
color: blue; /* Wyższa specyficzność (selektor typu) - nadpisze czerwień dla paragrafów */
}
.klasa {
color: green; /* Jeszcze wyższa specyficzność (selektor klasy) */
}
#identyfikator {
color: purple; /* Najwyższa specyficzność (selektor ID) */
}Z tego powodu selektor uniwersalny jest często używany do ustawiania bardzo podstawowych, globalnych resetów lub domyślnych wartości, które mają być łatwo nadpisywane przez bardziej konkretne style.
Potencjalne problemy i wydajność
Chociaż selektor uniwersalny jest prosty w użyciu, należy go stosować z rozwagą:
- Wydajność: Stosowanie stylów do absolutnie każdego elementu na stronie może mieć negatywny wpływ na wydajność renderowania, zwłaszcza w przypadku bardzo dużych i złożonych dokumentów HTML. Przeglądarka musi przeanalizować i zastosować regułę do każdego węzła w drzewie DOM.
- Nadpisywanie domyślnych stylów: Użycie
*do resetowania wszystkich marginesów i wypełnień może być pomocne, ale może też niepotrzebnie nadpisać domyślne style przeglądarki dla elementów, które ich potrzebują (np. marginesy dla list czy nagłówków), co wymaga późniejszego ich przywracania w bardziej specyficznych regułach.
Nowocześniejsze podejścia do resetowania stylów (np. Normalize.css lub bardziej ukierunkowane resety) często unikają nadmiernego użycia selektora uniwersalnego na rzecz bardziej precyzyjnych selektorów.
Zadania praktyczne
Zadanie 1 (z rozwiązaniem)
Stwórz prosty plik HTML zawierający nagłówek <h1>, paragraf <p> i listę nienumerowaną <ul> z kilkoma elementami <li>. Użyj selektora uniwersalnego (*) w zewnętrznym pliku CSS, aby ustawić czerwone obramowanie (border: 1px solid red;) dla wszystkich elementów na stronie. Zaobserwuj efekt w przeglądarce.
Rozwiązanie:
Plik HTML (np. index.html):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadanie 1 - Selektor Uniwersalny</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Nagłówek</h1>
<p>Paragraf tekstu.</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
</body>
</html>Plik CSS (style.css):
* {
border: 1px solid red;
}Efekt: Po otwarciu pliku HTML w przeglądarce zobaczysz, że każdy element (w tym <html>, <head> - choć niewidoczne, <body>, <h1>, <p>, <ul>, <li>) otrzymał czerwone obramowanie, co ilustruje działanie selektora uniwersalnego.
Zadanie 2 (do samodzielnego wykonania)
Zmodyfikuj plik CSS z Zadania 1. Oprócz reguły z selektorem uniwersalnym, dodaj nową regułę używającą selektora typu p, która ustawi zielone obramowanie (border: 1px solid green;) dla paragrafów. Jaki kolor obramowania będzie miał paragraf? Dlaczego?
Zadanie 3 (do samodzielnego wykonania)
Użyj selektora uniwersalnego, aby ustawić właściwość box-sizing na border-box dla wszystkich elementów na stronie. Jest to popularna technika ułatwiająca zarządzanie wymiarami elementów. (Nie musisz jeszcze w pełni rozumieć box-sizing, po prostu zastosuj regułę).
FAQ - Najczęściej zadawane pytania
Czy selektor uniwersalny wybiera również elementy <head> i jego zawartość?
Tak, selektor uniwersalny wybiera absolutnie wszystkie elementy w dokumencie, włączając w to <html>, <head>, <title>, <meta>, <link>, <script> oraz oczywiście wszystkie elementy wewnątrz <body>. Jednak style wizualne (jak kolor czy obramowanie) zastosowane do elementów niewidocznych (jak te w <head>) nie będą miały widocznego efektu.
Czy używanie * { margin: 0; padding: 0; } to dobra praktyka?
Jest to popularna, ale nieco przestarzała technika "twardego resetu". Może być skuteczna w usunięciu niespójności domyślnych stylów przeglądarek, ale jest też mało precyzyjna i może niepotrzebnie nadpisywać style. Nowocześniejsze podejścia, jak Normalize.css lub bardziej ukierunkowane resety, są często preferowane, ponieważ zachowują użyteczne domyślne style i korygują tylko niespójności.
Jak selektor uniwersalny wpływa na wydajność?
W prostych stronach wpływ jest zazwyczaj niezauważalny. Jednak w bardzo dużych i złożonych aplikacjach internetowych z tysiącami elementów DOM, reguła z selektorem uniwersalnym może potencjalnie spowolnić renderowanie, ponieważ przeglądarka musi ją zastosować do każdego elementu. Dlatego zaleca się ostrożność i unikanie nadmiernego używania *, zwłaszcza w złożonych selektorach.
Czy * ma taką samą specyficzność jak brak selektora (style dziedziczone)?
Nie. Selektor uniwersalny * ma specyficzność (0,0,0,0), co jest najniższą możliwą specyficznością dla jawnie zdefiniowanego selektora. Style dziedziczone mają jeszcze niższy priorytet niż jakakolwiek reguła z selektorem, w tym z selektorem uniwersalnym. Oznacza to, że reguła z * nadpisze styl odziedziczony.