Selektor tříd

Dalším a nejpoužívanějším selektorem je selektor tříd. Představte si následující kód:

<h1 class="trida-nadpis">Nadpis</h1>

Tento kód obsahuje prvek h1 s atributem class, co má hodnotu trida-nadpis. Říkáme tedy, že tento prvek má třídu trida-nadpis.

Abychom v CSS mohli vybrat všechny prvky, co mají třídu trida-nadpis, použijeme selektor .trida-nadpis například následovně:

.trida-nadpis {
	background-color: blue;
}

Všimněte si tečky na začátku selektoru. Tato tečka říká, že chceme vybrat HTML prvky s určitou třídou. V tomto případě se třídou trida-nadpis. Kdyby tam tečka nebyla, tak by CSS myslelo, že chceme vybrat všechny prvky <trida-nadpis>, které samozřejmě neexistují.