class vs id
class można powtarzać na wielu elementach i łączyć kilka naraz, a id musi być unikalny w całym dokumencie i służy do kotwic, etykiet i JavaScriptu.
Porównanie w tabeli
#Unikalność
Liczba wartości na elemencie
Specyficzność w CSS
Typowe zastosowania
Rekomendacja do stylowania
Przykład
#<p class="card">Pierwsza karta</p>
<p class="card">Druga karta, też z klasą card</p>
<h2 id="cennik">Cennik</h2>Definicja i zastosowanie
#Atrybut class jest wielokrotny: ta sama nazwa może wystąpić na wielu elementach, a jeden element może mieć kilka klas oddzielonych spacją, np. class="btn btn-primary". To podstawowy sposób stylowania w CSS i zarządzania elementami przez classList w JavaScripcie, a jego specyficzność jest niska i łatwa do nadpisania.
Atrybut id musi być unikalny w całym dokumencie, dlatego jeden element ma zawsze tylko jedną jego wartość. Służy do konkretnych, pojedynczych połączeń: kotwicy w adresie (#faq), połączenia <label for> z polem albo szybkiego wyszukania elementu przez getElementById. W CSS ma bardzo wysoką specyficzność, przez co selektor #id trudno później nadpisać.
Prosta zasada wyboru: do stylowania wielu podobnych elementów i pracy ze skryptem używaj class. Do unikalnych haków, które coś konkretnego wskazują (etykieta, kotwica, jednorazowe odwołanie w JavaScripcie), użyj id.
Składnia
#<element class="nazwa druga-nazwa">
<element id="unikalna-nazwa">Więcej przykładów
#<label for="email">E-mail</label>
<input id="email" type="email"><button id="save" type="button">Zapisz</button>
<button id="save" type="button">Zapisz (duplikat id!)</button>getElementById zwróci tylko pierwszy z nich. Klasę class można bez problemu powtarzać.
Dobre praktyki
#- Do stylowania w CSS sięgaj po
class. Selektor#idma bardzo wysoką specyficzność i trudno go nadpisać. idmusi być unikalny w całym dokumencie, nie tylko w obrębie jednego komponentu.- Jeden element może mieć wiele klas oddzielonych spacją, ale tylko jeden
id.
Powiązane hasła
#- classLista nazw klas, po których CSS i JavaScript odnajdują element.
- idUnikalny identyfikator elementu w całym dokumencie.
- <label>Etykieta pola formularza. Kliknięcie etykiety przenosi kursor do pola.
- <a>Odnośnik do innej strony, pliku, adresu e-mail albo miejsca na tej samej stronie.
- data-*Własne atrybuty do przechowywania danych dla skryptów i stylów.
Widzisz błąd albo brakuje przykładu? Napisz do nas.