HTML5
6.3. Selektory

Zatím jsme si ukázali, jak nastavit vzhled určitého elementu pro celý dokument společně. Někdy však potřebujeme stejný element zobrazit v různých případech rozdílně. Proto můžeme u každého elementu, který patří do těla dokumentu (body), určit jeho třídu pomocí atributu class. Na jméno třídy definované tímto atributem samozřejmě můžeme odkazovat i v definici stylu. Dejme tomu, že naše stránka obsahuje poznámky a varování zapisované následujícím způsobem:

<div class="poznamka">V tomto odstavci naleznete poznámku. Text
  nemá smysl, jen ilustruje použití tříd (atribut
  <tt>class</tt>).</div>

<div class="varovani">V tomto odstavci naleznete varování. Takže
  pozor! Text nemá smysl, jen ilustruje použití tříd.</div>

V definici stylu lze selektor s názvem elementu doplnit o název třídy. Název třídy se od jména elementu odděluje tečkou:

div.poznamka { font-size: smaller;
               color: gray;
               margin-left: 2em; }

div.varovani { color: red;
               font-weight: bold;
               margin-left: 2em;
               padding: 4px;
               border: solid 2pt outset; 
               border-color: red; }

Jako selektor můžeme použít i samotný název třídy. Pak deklarace platí pro všechny elementy, kterým je atributem class přiřazena daná třída. Na názvu elementu pak vůbec nezávisí.

.poznamka { font-size: smaller;
            color: gray;
            margin-left: 2em; }

Použití tagu <div> způsobí zalomení textu a text elementu pokračuje až na další řádce. Pokud chceme třídu přiřadit nějakému textu, který je součástí odstavce, použijeme k jeho značení element span společně s atributem class. span je nový element, který byl do HTML přidán právě kvůli stylům.