După ce am discutat despre selectorul universal (*), continuăm seria dedicată noțiunilor fundamentale de CSS analizând selectorul de identificator unic, reprezentat prin caracterul diez (#).
Ce reprezintă acest selector și ce anume țintește în foaia de stiluri atunci când scriem, de pildă, #continut? Selectorul # selectează un element specific din pagina HTML, identificat prin atributul unic id.
Să presupunem că avem în structura paginii următorul element HTML:
<div id="dexblog">Conținutul principal al secțiunii</div>Pentru a aplica o regulă de formatare exclusiv acestui container, vom scrie în fișierul CSS:
#dexblog {
color: red;
}Selectorul caută elementul unic din pagină care poartă respectivul ID și îi atribuie stilurile definite.
Bune practici și reguli de specificitate
Conform standardelor web W3C, o valoare a atributului id trebuie să fie strict unică în cadrul aceluiași document HTML. Înainte de a utiliza un identificator pentru stilizare, este util să vă puneți două întrebări practice:
- Este absolut necesar să folosesc un ID în loc de o clasă CSS?
- Voi avea vreodată nevoie să refolosesc acest stil vizual pe alte elemente din pagină?
De regulă, clasele (definite cu punct: .numeclasa) sunt preferate pentru stilizare deoarece au o specificitate mai redusă și pot fi reutilizate. ID-urile au o greutate (specificitate) mare în calculul CSS, ceea ce înseamnă că regulile lor sunt mai greu de suprascris ulterior, fiind recomandate mai degrabă pentru ancore de navigare sau selectare în JavaScript.
