Pokud existují dvě nebo více pravidel CSS, která ukazují na totéž prvek, „vyhraje“ selektor s nejvyšší hodnotou specificity a jeho deklarace stylu bude aplikována na tento HTML element.
Představte si specifičnost jako skóre/hodnocení, které určuje deklaraci stylu se nakonec aplikuje na prvek.
Podívejte se na následující příklady:
V tomto příkladu jsme použili prvek "p" jako selektor a určili červenou barvu pro tento prvek. Text bude červený:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Nyní se podívejte na příklad 2:
V tomto příkladu jsme přidali selektor třídy (pojmenovaný "test") a specifikoval zelenou barva pro tuto třídu. Text bude nyní zelený (i když jsme zadali červená barva pro výběr prvku "p"). Je to proto, že je dán selektor třídy vyšší priorita:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>Zkuste to sami →
<!DOCTYPE html>
<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:
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>Zkuste to sami →
<!DOCTYPE html>
<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:
V tomto příkladu jsme přidali inline styl pro prvek "p". The 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>Zkuste to sami →
<!DOCTYPE html>
<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>
Každý selektor CSS má své místo v hierarchii specifičnosti.
Existují čtyři kategorie, které definují úroveň specifičnosti selektoru:
1. Vložené styly - Příklad:
<h1 style="color: pink;">
2. ID - Příklad:
#navbar
3. Třídy, pseudotřídy, selektory atributů - Příklad:
.test, :hover, [href]
4. Prvky a pseudoprvky - Příklad:
h1, ::before
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 hodnota třídy (příp pseudotřída nebo selektor atributu), přidejte 1 pro každý selektor prvku nebo pseudoprvek.
Poznámka: Vložený styl získá hodnotu specifičnosti 1000 a je vždy s nejvyšší prioritou!
Poznámka 2: Jedna existuje výjimka z tohoto pravidla: pokud použijete !important pravidlo, přepíše to dokonce i 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) |
Výběr s nejvyšší hodnotou specifičnosti zvítězí a vstoupí v platnost!
Zvažte tyto tři fragmenty kódu:
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>Specifičnost A je 1 (selektor jednoho prvku)
Specificita B je 101 (jedna reference ID + jeden selektor prvku)
Specificita C je 1000 (vložený styl)
Protože třetí pravidlo (C) má nejvyšší hodnotu specificity (1000), tento styl prohlášení bude uplatněno.
Stejná specifičnost: vítězí nejnovější pravidlo - Pokud je stejné pravidlo zapsáno dvakrát do externí šablony stylů, pak vyhrává nejnovější pravidlo:
h1 {background-color: yellow;}
h1 {background-color: red;}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Selektory ID mají vyšší specifičnost než selektory atributů - Podívejte se na následující tři řádky kódu:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">This is a div</div>
</body>
</html>
první pravidlo je specifičtější než ostatní dvě, a proto bude použito.
Kontextové selektory jsou konkrétnější než jednotlivé prvky selektor - Vložená šablona stylů je blíže prvku, který má být upraven. Takže v následující situaci
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.:
.intro {background-color: yellow;}
h1 {background-color:
red;}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading</h1>
</body>
</html>
Univerzální selektor (*) a zděděné hodnoty mají specifičnost 0 - Univerzální selektor (*) a zděděné hodnoty jsou ignorovány!