#id
Selector vă permite să direcționați un element prin corelarea id
atributul HTML. Similar cu modul în care atributele de clasă sunt denotate în CSS cu .
o „punctă” ( #
) înainte de numele clasei, atributele ID sunt prefixate cu un „octothorpe” ( ), mai frecvent cunoscut sub numele de „hash” sau „semn de lire sterline”.
#header ( /* this is the ID selector */ background: #eee; )
Valorile atributului ID trebuie să fie unice. HTML cu două sau mai multe id
s identice nu se validează și va produce rezultate imprevizibile. Dacă există două aceleași, CSS se va potrivi și stiliza ambele. Cu toate acestea, JavaScript, atunci când solicitați un ID, îl va găsi pe primul și se va opri.
Selectorii ID sunt extrem de puternici. Au o specificitate foarte mare, în general scrisă ca (0, 1, 0, 0). Stilurile se aplică odată cu ele, suprascriu alte selectoare care folosesc doar etichete sau clase. A demonstra:
Verificați acest stilou!
Un paragraf cu atât un ID cât și un atribut de clasă este dat contrar regulilor CSS; chiar dacă selectorul de clasă ( .reusable
) este sub selectorul ID ( #unique
) din CSS (în general, acesta va suprascrie stilurile de deasupra acestuia în „cascadă”), paragraful rămâne roșu, deoarece #unique
copleșește culoarea albastră setată de .reusable
. O cantitate infinită de clase nu poate bate niciodată specificul ID-ului (deși a existat o eroare la un moment dat în care 256 de clase ar fi învins un ID).
Specificul ridicat și unicitatea înseamnă utilizarea #id
este o „opțiune nucleară” CSS: supraalimentată, inflexibilă și disproporționat de eficientă. Evitarea #id
selectorului în CSS este considerată o bună practică: este preferabil să folosiți o clasă în aproape fiecare caz.
Acestea fiind spuse, atributele ID au mai multe utilizări valoroase în afara CSS:
- Furnizarea de cârlige unice pentru JavaScript
- Elementele cu
id
atribute pot fi vizate prin etichete de ancorare, prin setareahref
atributului laid
valoare, prefixată de un#
simbol. Dacă faceți clic pe linkul de ancorare, se va focaliza din nou pagina curentă asupra elementului cu potrivireaid
. Acesta se numește „identificator de fragment”. - Pentru elemente cu adevărat unice în HTML, cum ar fi elementele de formular, ID-urile ar putea fi utile pentru lucruri precum legarea
label
s șiinput
s.
Puncte de interes
- Un valid
#id
nu poate începe cu un număr și trebuie să aibă cel puțin un caracter. O mare parte din Unicode sunt caractere valide într-un fișierid
. id
atributele și selectoarele sunt sensibile la majuscule și minuscule și trebuie să se potrivească exact între HTML, CSS și JavaScript
Suport pentru browser
Crom | Safari | Firefox | Operă | IE | Android | iOS |
---|---|---|---|---|---|---|
Orice | Orice | Orice | Orice | Orice | Orice | Orice |