CSS – Kaskádní styly

E:not(s)

an E element that does not match simple selector s

E ~ F

an F element preceded by an E element

Pseudotřídy

Definují speciální vlastnosti pro některé prvky. 
Příslušnost ke třídě může vznikat dynamicky.

Potomka

:first-child

Linku

:link
:visited

Dynamické

:hover
:active
:focus

Jazyka

:lang

Pseudoelementy

Neexistující elementy, které vznikají z logiky 
uspořádání dokumentu

:first-line

p:first-line { text-transform: uppercase }

:first-letter

p:first-letter { text-transform: uppercase;

font-size: 200%;
font-style: italic;
font-weight: bold;
float: left;

}

:before

p.special:before { content: ˝Special! ˝ }

:after

Dědičnost I

Hodnota se určí pomocí:

– Výsledku posloupnosti pravidel (kaskády)
– Jinak se použije zděděná hodnota (rodiče)
– Jinak se použije počáteční (inicializační) hodnota

Některé hodnoty se dědí, jiné ne

– body { color: black;

hodnota se dědí

background: white;

hodnota se nedědí

}

h1 { font-height: 120% }

120% hodnoty rodiče

Styly mohou pocházet od

– autora
– uživatele
– UA (user agent) – např. prohlížeče

Dědičnost II

Pro 

určení výsledu posloupnosti stylů (kaskády) je potřeba:

1.

Najít všechny deklarace vázané na element (pro dané médium)

2.

Seřadit je podle důležitosti
UA < 

uživatel < autor < autor !important < uživatel !important

3.

Seřadit je podle specifičnosti
pravidla

přesněji určující selektory mají přednost před obecnými

4.

Seřadit je podle pořadí výskytu
použije se pozdější pravidlo

Pro 

ovlivnění důležitosti pravidla slouží !important

p { font: normal 12pt sans-serif !important }

Dědičnost - Výpočet

a 

– atribut style

c 

– počet ostatních atributů a pseudotříd

b 

– počet ID atributů

d 

– počet jmen elementů a pseudoelementů

*             

{}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li            

{}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

li:first-line 

{}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */