Programowanie webowe | 04. CSS potrzebny do egzaminu

Uchwycenie elementów: id czy class?

Mirosław Zelent

Identyfikatory

Identyfikatory ID mogą zostać użyte do uchwycenia tylko jednego elementu, za to w sposób unikalny – nie mogą istnieć w kodzie HTML dwa elementy o takiej samej wartości atrybutu id. Zapis prezentuje się następująco:

Arkusz stylów CSS:

#container
 {
  
 } 

Kod HTML:

<div id="container"></div>

Jak widać powyżej, w przypadku zastosowania identyfikatora, selektor w CSS dodatkowo poprzedzamy znakiem #. Jeśli chodzi o nazwę identyfikatora (tutaj jest to container), to w HTML4 identyfikator musi zaczynać się literą (a-z A-Z), a po niej może nastąpić dowolna ilość liter, cyfr, myślników, podkreśleń, dwukropków, kropek. Zaś w HTML5 identyfikator musi zawierać przynajmniej jeden znak i nie może zawierać żadnej spacji.

Unikalność identyfikatora w HTML jest wymagana i obsługiwana na poziomie tzw. hierarchii DOM (ang. Document Object Model). Zapamiętajmy to dobrze: w języku HTML nie mogą istnieć dwa atrybuty id o takiej samej wartości (nazwie), nawet jeżeli byłyby to atrybuty określone dla różnych znaczników (na przykład dla diva i dla paragrafu):

źle! <div id="pierwszy"></div>  <p id="pierwszy"></p>

Atrybut ID musi jednoznacznie (unikalnie) identyfikować jeden konkretny element witryny. Tylko żebyśmy się dobrze rozumieli! Reguła unikalności identyfikatora mówi o tym, że nie mogą w HTML istnieć dwa identyfikatory o tej samej wartości, natomiast w HTML może istnieć wiele identyfikatorów, pod warunkiem, że każdy z nich ma inną wartość:

ok! <div id="pierwszy"></div>  <p id="trzynasty"></p>

Klasy

Klasy mogą zostać użyte do uchwycenia dowolnej liczby elementów (w tym także jednego!). Zapis prezentuje się następująco:

Arkusz stylów CSS:

.container
 {
  
 } 

Kod HTML:

<div class="container"></div>

Jak widać powyżej w przypadku zastosowania klas, selektor w CSS dodatkowo poprzedzamy znakiem kropki. Częstym błędem osób początkujących jest zakładanie, iż skoro za pomocą identyfikatora możemy uchwycić tylko jeden element, to w takim razie za pomocą klas można uchwycić tylko i wyłącznie kilka obiektów. Nieprawda - elementów posiadających atrybut class może być w HTML dowolna ilość, w tym także tylko jeden!

Kiedy użyć identyfikatora, a kiedy klasy?

Jeżeli łapiemy dwa lub więcej elementów w CSS, to siłą rzeczy pozostaje nam użyć klasy (gdyż nadanie tego samego id dwóm lub więcej elementom łamie regułę unikalności identyfikatora - duży błąd!). Jednak co w przypadku, gdy chcemy uchwycić tylko jeden element – skoro możemy użyć zarówno identyfikatora jak i klasy, to który sposób jest lepszy?

Cóż, to złożony problem. Ustanowienie identyfikatora w HTML wymusza na przeglądarce obsługę mechanizmu unikalności tegoż elementu (jest on wówczas wyróżniony w specjalny sposób w tzw. hierarchii DOM). Jeżeli jedynym naszym celem jest ostylować element, to ustanowienie unikalnego id wydaje się być niepotrzebną, lekką przesadą.

Identyfikator powinniśmy zastosować przede wszystkim w tych elementach, które zamierzamy później uchwycić w skryptach JavaScript, albo które będą służyć jako tzw. punkty nawigacyjne witryny (kotwice nawigacyjne).

Reasumując: stosowanie identyfikatora tylko do celów ostylowania elementu w CSS jest niepotrzebnym "mieszaniem" w hierarchii DOM. Mówiąc najprościej: nie jest to optymalne. Natomiast absolutnie nie jest to błędem! Specyfikacja W3C HTML5 (źródło) mówi wyraźnie: Element posiadający unikalny identyfikator może zostać użyty do różnorodnych celów - przede wszystkim jako sposób linkowania do konkretnych części dokumentu (kotwica nawigacyjna), jako uchwyt dla skryptów JS oraz do ostylowania konkretnego elementu w CSS.