Atributul class în HTML

<p class="nota nota-mare">9,50</p>

Ce face Atributul class

Atributul class conține o listă de nume de clase separate prin spațiu. Spre deosebire de id, aceeași clasă poate fi pusă pe oricâte elemente, iar un element poate avea mai multe clase în același timp.

În CSS, clasele se selectează cu punct (.nota). În JavaScript le găsești cu document.querySelectorAll(".nota") și le modifici prin element.classList, care are metodele add(), remove(), toggle() și contains().

Clasele nu au semnificație pentru browser sau pentru cititoarele de ecran: sunt doar etichete pentru stiluri și scripturi. Alege nume care descriu rolul elementului (buton-principal), nu aspectul lui (text-rosu).

Atribute

Atribut	Descriere
class	Unul sau mai multe nume de clase, separate prin spații. Numele sunt sensibile la majuscule: Nota și nota sunt clase diferite.

Exemple

Exemplul 1: Mai multe clase pe același element

Primul paragraf are două clase: stilul de bază nota și varianta nota-mica.

<style>
  .nota { font-weight: bold; }
  .nota-mica { color: #dc2626; }
</style>

<p>Matematică: <span class="nota nota-mica">4,50</span></p>
<p>Română: <span class="nota">9,25</span></p>

Ce afișează browserul

Matematică: 4,50 (îngroșat, roșu)
Română: 9,25 (îngroșat, culoarea normală a textului)

Exemplul 2: Adăugarea și scoaterea unei clase cu classList

Butonul comută clasa activ pe paragraf, iar CSS-ul schimbă aspectul în funcție de ea.

<style>
  .mesaj.activ { background: #fef3c7; }
</style>

<p class="mesaj" id="mesaj">Comanda ta de 120 lei a fost trimisă.</p>
<button id="buton">Evidențiază</button>

<script>
  document.getElementById("buton").addEventListener("click", () => {
    document.getElementById("mesaj").classList.toggle("activ");
  });
</script>

Ce afișează browserul

Comanda ta de 120 lei a fost trimisă.
[Evidențiază]
La primul clic paragraful primește fundal galben deschis; la al doilea clic revine la normal.

Greșeli frecvente

• Despărțirea claselor prin virgulă (class="nota, mare"). Separatorul corect este spațiul; cu virgulă, prima clasă devine nota, și selectorul .nota nu se mai potrivește.
• Scrierea a două atribute class pe același element. Browserul îl păstrează doar pe primul; pune toate clasele în același atribut.
• Modificarea directă a element.className când vrei doar să adaugi o clasă: suprascrii toate clasele existente. Folosește classList.add().

Comenzi înrudite

• Atributul id: Dă unui element un identificator unic în pagină, folosit de linkuri cu #, de CSS, de JavaScript și de etichetele formularelor.
• Atributele data-*: Atribute personalizate care încep cu data- și păstrează informații suplimentare pe un element, citite apoi din JavaScript sau din CSS.
• <span>: Container generic de tip inline, utilizat pentru a grupa o porțiune de text și a-i aplica stiluri CSS sau acțiuni JS.
• <div>: Container generic de tip bloc (division), fără semnificație semantică, folosit pentru gruparea elementelor și stilizare CSS.