dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
CSS Toate proprietățile CSS

Selectori de bază (element, clasă, id) în CSS

Selectori și reguli de bază CSS1+

Mecanismul prin care CSS identifică elementele din HTML cărora le aplică stilurile.

Sintaxă CSS 
p { color: red; }           /* element */
.card { padding: 16px; }     /* clasă */
#antet { background: blue; } /* id */
* { margin: 0; }            /* universal */

Ce face Selectori de bază (element, clasă, id)

Selectorii reprezintă prima parte a oricărei reguli CSS. Ei indică browserului exact ce elemente HTML trebuie stilizate.

Cele patru tipuri fundamentale sunt:
• Selectorul de tip (element): vizează toate tagurile cu acel nume (ex. p, h1, button).
• Selectorul de clasă (.nume): cel mai folosit în practica modernă; poate fi aplicat oricărui număr de elemente din pagină.
• Selectorul de ID (#nume): vizează un element unic pe pagină; are o specificitate foarte mare.
• Selectorul universal (*): vizează absolut toate elementele din pagină (folosit frecvent la resetarea marginilor).

Valori uzuale

Valoare Descriere
tag Selectează toate elementele cu acel tag HTML (ex. h2, a, div).
.clasa Selectează toate elementele care au atributul class=”clasa”.
#id Selectează elementul unic cu atributul id=”id”.
* Selectează toate elementele din document.

Exemple

Exemplul 1: Combinarea selectorilor pentru un stil clar

Clasele permit refolosirea stilurilor pe elemente diferite.

/* Resetează toate elementele */
* {
  box-sizing: border-box;
}

/* Toate titlurile h2 */
h2 {
  color: #1e293b;
}

/* Orice element cu clasa .buton-primar */
.buton-primar {
  background-color: #2563eb;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 6px;
}

Efect vizual în browser

Toate titlurile h2 devin gri-închis, iar elementele cu clasa .buton-primar devin butoane albastre cu text alb și colțuri rotunjite.

Greșeli frecvente

  • Folosirea excesivă a selectorilor de ID (#antet) pentru stilizare; ID-urile au o specificitate prea mare și sunt greu de suprascris în CSS. Se recomandă clase (.antet).
  • Uitarea punctului din fața clasei (scrierea card { … } în loc de .card { … } determină browserul să caute un tag HTML inexistent numit ).

Comenzi înrudite