Selektory

Pravidla kaskádových stylů mohou přistupovat k HTML prvkům různými způsoby. 

• Pravidla pro všechny elementy: * { ... }
• Pravidla pro určité elementy: HTML tag { ... }
  • p {color: red;} - změní barvu všech odstavců na červenou.
  • Lze zapsat více selektorů, které se oddělují čárkou. Např. p, div, strong { ... }.
• Pravidla s vnořováním: rodic potomek{ ... }
  • Jedná se o konkretizaci prvků, ke kterém se pravidlo váže.
  • ul il ul{ ...} - se týká pouze vnořených nesetříděných seznamů.
• Pravidla pro elementy s určitou třídou: .nazevTridy { ... }
  • .cervene{background-color:red;}: vykreslí elementy s danou třídou (vlastnost class="cervene") s červeným pozadím.
• Pravidla pro elementy s identifikátorem: #nezavID { ... }
  • #pozor{color:yellow;} - písmo elementu s vlastností id="pozor" vykreslí žlutou barvou.

Kaskádové styly vytvářejí posloupnost jednotlivých pravidel. Při jejich aplikování platí následující principy:

• Pravidla se dědí.
  • body{color: blue; font-family;Arial} - veškeré texty v <body> mají nastavenou barvu a font.  
• Více konkrétnější pravidla přepisují pravidla obecnější.
  • Váhy pravidel: !important > p#cervena > p.cervena > p

!important

Se připisuje k hodnotě vlastnosti, pokud chceme požadovanou vlastnost prostě chceme, alá "tohle je nejdůležitější, prohlížeči".
Např: p{ color: red !important; }  

:pseudotřídy

Pseudotřídy jsou upřesňující zápisy, které specifikují určité stavy prvků. Jedná se o rozšíření výše zmíněných selektorů. 

CSS2 využívalo pseudotřídy převážně pro zvýraznění odkazů:

a:visited { ... } - upravuje navštívené odkazy
a:hover{ ... } - pravidla se aplikují po přejetí myší. 
a:active { ... } - zvýrazní Tabem aktivní odkaz.

Nyní se velice často se využívají pseudotřídy týkající se určitého prvku vzhledem k četnosti na stránce/prvku.

#vizitka a:first-child { ... } - aplikoval by pravidla pro první odkaz ve vizitce.
#vizitka a:last-child{ ... } - pravidlo určené pro poslední odkaz v vizitce. 
#vizitka a:nth-child(X) { ... } - v závorce obsahuje hodnotu, pro jaké potomky se pravidlo bude aplikovat. Např. lichý (odd), sudý (even), každý pátý (5n), každý třetí od 2. prvku včetně (3n+2) aj.

Krom toho je možné upravovat také (formulářové) prvky, které mají jistou hodnotu.

:disabled
:checked
:read-only
:valid
:invalid
:required

::pseudo elementy

V nové verzi CSS3 byla rozšířena možnost upravovat specifické části prvků. Mají podobný zápis jako pseudotřídy, oddělují se pomocí ::.

Např: 

p::first-letter { ... } 
p::first-line { ... }
p::before { ... } - slouží k vkládání obsahu před daný prvek (např. content: " - KOUPIT!";). 
p::after { ... } - slouží ke vkládání obsahu po daném prvku. 
p::selection { ... } - upravuje vybrané části. Vhodné pro barvy textu a pozadí .