ID - CSS-Tricks | Almanach CSS 2025

#idSelektor pozwala kierować elementu poprzez odwołanie do idatrybutu HTML. Podobnie jak atrybuty klas w CSS są oznaczane „kropką” ( .) przed nazwą klasy, atrybuty identyfikatora są poprzedzone „oktotorpe” ( #), powszechnie znanym jako „krzyżyk” lub „krzyżyk ”.

#header ( /* this is the ID selector */ background: #eee; )

Wartości atrybutów ID powinny być unikalne. HTML z dwoma lub więcej identycznymi ids nie sprawdza poprawności i da nieprzewidywalne wyniki. Jeśli są dwa takie same, CSS nadal będzie pasował i stylizował oba. Jednak JavaScript, podczas zapytania o identyfikator, znajdzie pierwszy i zatrzyma się.

Selektory ID są niezwykle potężne. Mają bardzo wysoką specyficzność, zwykle zapisywane jako (0, 1, 0, 0). Zastosowane style zastępują inne selektory, które używają tylko znaczników lub klas. Aby zademonstrować:

Sprawdź ten długopis!

Akapit zawierający zarówno identyfikator, jak i atrybut klasy jest sprzeczny z regułami CSS; mimo że selektor klas ( .reusable) znajduje się poniżej selektora ID ( #unique) w CSS (generalnie przesłoniłby style nad nim w „kaskadzie”), akapit pozostaje czerwony, ponieważ przesłania #uniqueniebieski kolor ustawiony przez .reusable. Nieskończona liczba klas nigdy nie jest w stanie pokonać specyfiki identyfikatora (chociaż w pewnym momencie wystąpił błąd, w którym 256 klas pokonało identyfikator).

Wysoka specyficzność i niepowtarzalność oznacza stosowanie #idCSS jako „opcja jądrowa”: nadmierna moc, nieelastyczna i nieproporcjonalnie skuteczna. Unikanie #idselektora w CSS jest uważane za najlepszą praktykę: w prawie każdym przypadku lepiej jest używać klasy.

Mimo to atrybuty identyfikatora mają kilka cennych zastosowań poza CSS:

Zapewnienie unikalnych punktów zaczepienia dla JavaScript
Elementy z idatrybutami można kierować za pomocą znaczników kotwicy, ustawiając hrefatrybut na idwartość poprzedzoną #symbolem. Kliknięcie tego linku zakotwiczenia spowoduje ponowne przeniesienie fokusu na bieżącą stronę do elementu z dopasowanym id. Nazywa się to „identyfikatorem fragmentu”.
W przypadku naprawdę unikalnych elementów w kodzie HTML, takich jak elementy formularzy, identyfikatory mogą być przydatne do takich rzeczy, jak łączenie labeli input.

Użyteczne miejsca

Prawidłowy #idnumer nie może zaczynać się od liczby i musi mieć co najmniej jeden znak. Duża część Unicode to prawidłowe znaki w pliku id.
id w atrybutach i selektorach rozróżniana jest wielkość liter i muszą one dokładnie pasować do HTML, CSS i JavaScript