Trieda - Triky CSS | Almanach CSS 2025

Selektor triedy v CSS začína bodkou (.), Napríklad takto:

.class ( )

Selektor triedy vyberie všetky prvky so zodpovedajúcim atribútom triedy.

Napríklad tento prvok:

Push Me

je vybratý a upravený takto:

.big-button ( font-size: 60px; )

Triede môžete dať ľubovoľné meno, ktoré sa začína písmenom, spojovníkom (-) alebo podčiarkovníkom (_). V názvoch tried môžete použiť čísla, ale číslo nemôže byť prvým znakom alebo druhým znakom za pomlčkou. Pokiaľ sa nezbláznite a nezačnete unikať selektorom, čo môže byť divné:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Element môže mať viac ako jednu triedu:


 This paragraph will get styles from .intro and .blue selectors.

Element s viacerými triedami je štylizovaný podľa pravidiel CSS pre každú triedu. Môžete tiež kombinovať viac tried na výber prvkov:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Táto ukážka ukazuje, ako sa selektory jednej triedy líšia od kombinovaných selektorov:

Selektor triedy môžete tiež obmedziť na konkrétny druh prvku, ktorý sa niekedy nazýva „značka kvalifikujúca“:

ul.menu ( list-style: none; )

Špecifickosť

Selektor triedy sám osebe má hodnotu špecifickosti 0, 0, 1, 0. To je „výkonnejšie“ ako selektor prvkov (ako:), a ( )ale menej výkonné ako selektor ID (ako #header ( )). Konkrétnosť sa zvýši, keď skombinujete selektory triedy alebo obmedzíte selektor na konkrétny prvok.

Prístup k triedam pomocou JavaScriptu

V classListJavaScripte môžete čítať a manipulovať s triedami prvkov . Pridanie triedy môže byť napríklad ako:

document.getElementById('italicize').classList.add('italic');

Táto ukážka zobrazuje základné príklady classListpoužitia:

jQuery má tiež metódy pre interakciu s triedami, vrátane .addClass(), .removeClass(), .toggleClass()a .hasClass().

Viac informácií

Prečítajte si špecifikáciu W3C pre selektory tried.
Získajte viac informácií o názvoch sémantických tried.
Získajte viac informácií o konkrétnostiach.
Získajte informácie o rozdieloch medzi triedami a ID.
Získajte informácie o viacerých selektoroch tried a kombách selektorov tried / ID.
Získajte viac informácií o API .classList.
Dozviete sa viac o manipulácii s triedami v jQuery.