*
Gwiazdka pasuje do każdego elementu. Służy do resetów stylów i reguł dla wszystkich dzieci wybranego kontenera.
Przykład
#*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}<div class="stage" style="display: grid; gap: 6px;">
<h3>Karta bez domyślnych marginesów</h3>
<p style="color: #a1a1aa;">Nagłówek i akapit nie mają już odstępów dodanych przez przeglądarkę. O każdym odstępie decydujesz sam, tutaj przez gap.</p>
</div>Definicja i zastosowanie
#Selektor uniwersalny * wybiera każdy element, bez względu na znacznik, klasy i atrybuty. Użyty samodzielnie trafia w cały dokument, łącznie z html i body. W połączeniu z innymi selektorami ogranicza się do wybranego fragmentu: .card > * to wszystkie bezpośrednie dzieci karty.
Ma zerową specyficzność (0, 0, 0), więc nie dokłada nic do wagi selektora. Reguła * { margin: 0 } przegra z każdą inną regułą ustawiającą margines. Gwiazdka jest też niejawnie obecna przed samotną klasą czy atrybutem: .lead znaczy to samo co *.lead.
Najczęściej spotkasz ją w resecie box-sizing oraz w regule odstępów zwanej „sową” (* + *), która dodaje margines każdemu elementowi poprzedzonemu rodzeństwem. Pamiętaj, że * nie obejmuje pseudoelementów, dlatego resety wymieniają osobno *::before i *::after.
Obawy o wydajność samej gwiazdki są dziś przesadzone, ale ciężkie reguły dla wszystkich elementów, jak * { transition: all 0.3s }, potrafią spowolnić stronę i wywołać niechciane animacje.
Składnia
#* { właściwość: wartość; }Przykładowe selektory
#- Dosłownie wszystko, także
htmlibody, dlatego przerywaną ramkę widać nawet wokół całego podglądu. - Wszyscy potomkowie
bodyna każdej głębokości, takżestrongw akapicie iliw liście. Elementyhtmlibodyjuż nie pasują. - Tylko bezpośrednie dzieci ramki: nagłówek, akapit i lista. Elementy
strongilileżą głębiej. - Każde dziecko poprzedzone rodzeństwem dostaje górny margines. Pierwsze zostaje bez odstępu.
Przykładowe selektory w praktyce
#*
html i body, dlatego przerywaną ramkę widać nawet wokół całego podglądu.* {
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}body *
body na każdej głębokości, także strong w akapicie i li w liście. Elementy html i body już nie pasują.body * {
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}.demo > *
strong i li leżą głębiej..demo > * {
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}.flow > * + *
.flow > * + * {
margin-top: 14px;
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}Więcej przykładów
#.flow > * + * {
margin-top: 12px;
}<style>:where(.flow > *) { margin: 0; }</style>
<article class="flow stage">
<h3>Moduł 2</h3>
<p>Każdy kolejny element dostaje odstęp od poprzedniego.</p>
<p>Pierwszy element nie ma marginesu u góry, więc nic nie odstaje od krawędzi ramki.</p>
</article>Zapis * + * przypomina parę oczu, stąd żartobliwa nazwa „sowa”. Reguła działa dla dowolnych elementów, bez wymieniania ich z nazwy.
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
#- Reset z gwiazdką umieść na samej górze arkusza. Ma zerową wagę, więc każda późniejsza reguła łatwo go nadpisze.
- Nie nadawaj przez
*ciężkich efektów, takich jak przejścia, cienie czy filtry. Trafią w setki elementów, także te, których nie widać. - Zamiast
.card *(wszyscy potomkowie) zwykle wystarczy.card > *(tylko dzieci). Reguła jest wtedy bardziej przewidywalna.
Powiązane hasła
#- Selektor typuWybiera wszystkie elementy o podanej nazwie znacznika, na przykład każdy akapit p albo każdy punkt listy li.
- A > BZnak > wybiera elementy B, które są bezpośrednimi dziećmi elementu A, czyli leżą dokładnie jeden poziom niżej.
- A + BZnak + wybiera element B, który stoi bezpośrednio za elementem A i ma z nim wspólnego rodzica.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
- box-sizingDecyduje, czy width i height obejmują padding i obramowanie.
- :where()Działa jak :is(), ale zawsze ma zerową specyficzność. Idealna do stylów bazowych, które łatwo nadpisać.
Widzisz błąd albo brakuje przykładu? Napisz do nas.