Clasa - CSS-Tricks | Almanah CSS 2025

Un selector de clasă din CSS începe cu un punct (.), Astfel:

.class ( )

Un selector de clasă selectează toate elementele cu un atribut de clasă potrivită.

De exemplu, acest element:

Push Me

este selectat și stilat astfel:

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

Puteți da unei clase orice nume care începe cu o literă, cratimă (-) sau subliniere (_). Puteți utiliza numere în numele clasei, dar un număr nu poate fi primul caracter sau al doilea caracter după o cratimă. Dacă nu te înnebunești și începi să scapi de selectoare, ceea ce poate deveni ciudat:

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

Un element poate avea mai multe clase:


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

Un element cu mai multe clase este stilat cu regulile CSS pentru fiecare clasă. De asemenea, puteți combina mai multe clase pentru a selecta elemente:

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

Această demonstrație arată cum diferă selectoarele dintr-o singură clasă de selectoarele combinate:

Puteți, de asemenea, să limitați un selector de clase la un anumit tip de element, care este uneori numit „calificare etichetă”:

ul.menu ( list-style: none; )

Specificitate

În sine, un selector de clasă are o valoare de specificitate 0, 0, 1, 0. Asta este „mai puternic” decât un selector de elemente (cum ar fi:), a ( )dar mai puțin puternic decât un selector de identificare (cum ar fi #header ( )). Specificitatea crește atunci când combinați selectoarele de clasă sau limitați selectorul la un anumit element.

Accesarea cursurilor cu JavaScript

Puteți citi și manipula clasele unui element cu classListJavaScript. De exemplu, adăugarea unei clase ar putea fi ca:

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

Această demonstrație prezintă exemple de bază ale classListutilizării:

jQuery are de asemenea metode pentru a interacționa cu clase, inclusiv .addClass(), .removeClass(), .toggleClass()și .hasClass().

Mai multe informatii

Citiți specificația W3C pentru selectoarele de clasă.
Aflați mai multe despre numele clasei semantice.
Aflați mai multe despre specificitate.
Aflați despre diferența dintre clase și ID-uri.
Aflați mai multe despre selectoarele de clasă și combinațiile de selector de clasă / ID.
Aflați mai multe despre API-ul .classList.
Aflați despre manipularea clasei în jQuery.