Už umíme styl připojit ke stránce. Druhou podstatnou částí kaskádových stylů jsou selektory, které určují, na které elementy dokumentu se aplikují vlastnosti nastavené v deklaraci.
Pro účely selektorů se dokument HTML chápe jako stromová struktura složená z jednotlivých elementů. Selektor pak vždy vybere určité uzly stromu a ně se pak pravidlo aplikuje. Pro snazší představu si ukážeme jednoduchý dokument a jeho stromovou reprezentaci. U výkladu jednotlivých selektorů si pak na příkladu názorně ukážeme, jaké uzly stromu (a tedy elementy dokumentu) se vyberou.
Příklad 1. Ukázkový dokument HTML a jeho stromová reprezentace
<!DOCTYPE html> <html> <head> <title>Titulek stránky</title> </head> <body> <h1 id="kapitola1">Nadpis</h1> <p>Text 1</p> <div class="obsah"> <ul> <li>Položka 1</li> <li>Položka 2</li> <li> Item3 <ul type="circle"> <li>Zanořená položka 1</li> <li>Zanořená položka 2</li> </ul> </li> </ul> <p>Text 2</p> </div> <p>Text 3</p> </body> </html>
