Hvězdička * neboli univerzální selektor čili Universal Selector
Jakou funkci má univerzální selektor? Jaké je jeho nejtypičtější použití? Čtěte dále.
3.4.2023 | doba čtení: asi 10 min
České termíny pro terminologii webové tvorby jsou takový překladatelský oříšek. Ačkoli rád očišťuji českou mluvu od zaplevelení cizími termíny jsa věren tradici tisícileté jazyka českého, od prvních textů kronik, překladů děl cizojazyčných již v době předhusitské, přes období reformace a Jana Amose Komenského až po jazyk ducha přičinlivého a státotvorného období první republiky v podání například Tomáše Bati či Edvarda Beneše, někdy se cizím termínům prostě nevyhnu a naopak si v nich vyloženě libuju a bude tomu tak právě v tomto článku. Lze určitě říci, že schopnost jazyka absorbovat a inkorporovat cizí vlivy přispívá k jeho obohacení a vypovídá o jeho flexibilitě a vitalitě.
Každopádně shodou historických okolností je jazykem IT, CS a internetu především Angličtina (a nikoliv třeba Sanskrt, Řečtina, Latina nebo Španělština) a to především ta americká. Koneckonců, jak zmiňuji jinde, pro psaní kódu je nejvhodnější právě americký layout klávesnice. Vyzkoušejte sami.
Ale o tom jsem v tomto článku vůbec psát nechtěl. Chtěl jsem psát o univerzálním selektoru neboli o hvězdičce (Universal Selector, Asterisk).
Na internetu naleznete samozřejmě mnoho pojednání o tomto selektoru. Uvádím odkaz alespoň na zdroje nejváženější:
developer.mozilla.org
www.w3schools.com
meyerweb.com
Nicméně hlavním účelem tohoto článku je přinést na věc můj pohled na tento prvek jazyka CSS a popis, funkce a využití tohoto selektoru co nejvíce zjednodušit.
Co tedy určuje Universal Selector? Co o něm lze říci?
Přiřazuje CSS vlastnosti (CSS Properties) všech HTML elementů (tagů) v našem markupu.
Důležité pojmy ve vztahu k němu jsou specificita (Specificity) a dědičnost (Inheritance).
Co se týká specificity, tak jak už bylo naznačeno výše, hvězdička přepíše (overrides) všechny Tag selektory. Ovšem pozor nepřepíše selektory třídy (Class selectors)!
Co se dědičnosti (Inheritance) týče, dělí se css vlastnosti (Properties) na ty, co se dědí a na ty, co se nedědí. Typickým příkladem, kde inheritance nepůsobí jsou marginy. Naopak dědí se typografické vlastnosti (velikost či barva písma).
O inheritanci více do hloubky zde:
developer.mozilla.org
No a abychom to řekli co nejjasněji a nejpraktičtěji, hvězdičkový selektor použijeme typicky právě pro zmíněný margin (neboli okraj).
O marginu (okraji) a paddingu (výplni) celkem stravitelně například zde:
www.bitdegree.org
Takže pokud chceme zbavit náš html dokument všech vrozených marginů (v developerské konzoli je naleznete pod pojmem "user agent stylesheet" a patří k vlastnostem, které jsme nenastavili, podobně jako třeba že barva písma je defaultně černá), použijeme na začátku toto CSS pravidlo:
* {margin: 0;}
Takto odstraníme veškeré okraje u všech html tagů. Pokud bychom toto učinili pouze u html nebo <body> tagu, pak by okraje byly odstraněny pouze okolo těchto elementů, nikoli však u elementů, které jsou v nich obsaženy.
Zde je odkaz na můj jednoduchý demonstrátor, jak CSS pravidlo (CSS Rule) uvozené hvězdičkou ovlivňuje marginy a barvy. Zkuste si kód stránky zobrazit (ctrl+U), zkopírovat nebo si napsat svůj a hvězdičku vyměnit za tag selektor <html>. A pozorujte, co CSS pravidlo uvozené hvězdičkou ovlivní a co nikoliv. Uvidíte, že v případě barvy přepíše barvu určenou tagem <body>, ale nikoli tu specifikovanou class selektorem .color-blue. Demostránku si také samozřejmě můžete prozkoumat pomocí developerské konzole a různé CSS vlastnosti vypínat a sledovat, co se stane a která vlastnost se poté uplatní.
Byl pro vás tento článek přínosný? Chcete-li můžete poslat příspěvek na kávu, která pomohla tento článek napsat.
Sdílet:
