Specifičnost CSS
Co je specifičnost?
Pokud existují dvě nebo více pravidel CSS, která ukazují na stejný prvek, „vyhraje“ selektor s nejvyšší hodnotou specifičnosti a na tento prvek HTML se použije jeho deklarace stylu.
Specifičnost si představte jako skóre/hodnocení, které určuje, která deklarace stylu se nakonec použije na prvek.
Podívejte se na následující příklady:
Příklad 1
V tomto příkladu jsme použili prvek "p" jako selektor a určili jsme pro tento prvek červenou barvu. Text bude červený:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Nyní se podívejte na příklad 2:
Příklad 2
V tomto příkladu jsme přidali selektor třídy (pojmenovaný "test") a specifikovali zelenou barvu pro tuto třídu. Text bude nyní zelený (i když jsme zadali červenou barvu pro selektor prvku "p". Je to proto, že selektor třídy má vyšší prioritu:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Nyní se podívejte na příklad 3:
Příklad 3
V tomto příkladu jsme přidali selektor id (pojmenovaný "demo"). Text bude nyní modrý, protože selektor ID má vyšší prioritu:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Nyní se podívejte na příklad 4:
Příklad 4
V tomto příkladu jsme přidali inline styl pro prvek "p". Text bude nyní růžový, protože vložený styl má nejvyšší prioritu:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
Hierarchie specifičnosti
Každý selektor CSS má své místo v hierarchii specifičnosti.
Existují čtyři kategorie, které definují úroveň specifičnosti selektoru:
- Vložené styly – Příklad: <h1 style="color: pink;">
- ID – Příklad: #navbar
- Třídy, pseudotřídy, selektory atributů – Příklad: .test, :hover, [href]
- Prvky a pseudoprvky - Příklad: h1, :before
Jak vypočítat specifičnost?
Zapamatujte si, jak vypočítat specifičnost!
Začněte na 0, přidejte 100 pro každou hodnotu ID, přidejte 10 pro každou hodnotu třídy (nebo pseudotřídu nebo selektor atributu), přidejte 1 pro každý selektor prvku nebo pseudoprvek.
Poznámka: Inline styl získá hodnotu specifičnosti 1000 a vždy má nejvyšší prioritu!
Poznámka 2: Toto pravidlo má jednu výjimku: pokud pravidlo použijete !important
, přepíše dokonce vložené styly!
Níže uvedená tabulka ukazuje několik příkladů, jak vypočítat hodnoty specificity:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
Selektor s nejvyšší hodnotou specifičnosti vyhraje a vstoupí v platnost!
Zvažte tyto tři fragmenty kódu:
Příklad
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
Specifičnost A je 1 (selektor jednoho prvku)
Specifičnost B je 101 (jedna reference ID + jeden selektor prvku)
Specifičnost C je 1000 (inline styling)
Protože třetí pravidlo (C) má nejvyšší hodnotu specifičnosti (1000), použije se tato deklarace stylu.
Další příklady pravidel specifičnosti
Stejná specifičnost: vyhrává nejnovější pravidlo – Pokud je stejné pravidlo zapsáno dvakrát do externí šablony stylů, vyhrává nejnovější pravidlo:
Příklad
h1 {background-color: yellow;}
h1 {background-color: red;}
Selektory ID mají vyšší specifičnost než selektory atributů – Podívejte se na následující tři řádky kódu:
Příklad
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
první pravidlo je specifičtější než ostatní dvě, a proto bude použito.
Kontextové selektory jsou specifičtější než selektor jednotlivých prvků – Vložená šablona stylů je blíže prvku, který má být stylizován. Tedy v následující situaci
Příklad
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
použije se druhé pravidlo.
Selektor třídy překonává libovolný počet selektorů prvků – selektor třídy, jako je .intro bije h1, p, div atd.:
Příklad
.intro {background-color: yellow;}
h1 {background-color:
red;}
Univerzální selektor (*) a zděděné hodnoty mají specifičnost 0 - Univerzální selektor (*) a zděděné hodnoty jsou ignorovány!