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.
Polecamy: Mega Sekurak Hacking Party
Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - wpiszcie go w koszyku, dzięki czemu otrzymacie 40% zniżki na bilet standard. Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać: kontakt@pasja-informatyki.pl. Dziękujemy za poświęcony czas - to dzięki Wam serwis staje się coraz lepszy!