Uchwycenie elementów w CSS: id czy class?

MZ | 11-06-2017 | 21:18:32

CSS (ang. Cascading Style Sheets) to tak zwane kaskadowe arkusze stylów i jak wiemy służą one do opisania wyglądu elementów witryny, uprzednio zdefiniowanych w HTML. Kodem CSS możemy także wpływać na położenie elementów i wzajemne relacje między nimi. Natomiast w związku z taką definicją, pojawia się nam w głowach naturalne pytanie: W jaki sposób w praktyce dokonać przypisania stylów do konkretnego znacznika HTML? Otóż aby nadać style potrzebujemy ten konkretny element "uchwycić" (czyli wybrać spośród wszystkich innych) – jako uchwyty stosujemy w CSS tzw. selektory.

Selektory, atrybuty, wartości

Ogólny schemat zapisywania kodu CSS prezentuje się następująco:

selector
{
property: value;
}

Selektor (jak sama nazwa wskazuje: selekcja = wybór) określa jednoznacznie do których elementów z kodu HTML zostaną zastosowane właściwości podane w tzw. ciele selektora (czyli pomiędzy nawiasami klamrowymi). Każda właściwość (ang. property = właściwość, atrybut, cecha) określa jakiś aspekt wyglądu elementu, zaś wartość tego atrybutu (ang. value) zapisana jest po dwukropku i zakończona średnikiem. Oczywiście najlepiej jest zobaczyć przykładowy zapis, zamiast ogólnej konwencji:

body
{
background-color: gray;
font-family: Arial;
}

W tym przypadku naszym selektorem uchwyciliśmy sekcję <body> czyli całe ciało witryny, nadając jej szary kolor tła oraz krój czcionki Arial. Znaki białe (spacje, przejścia do nowej linii) są opcjonalne - można je wyciąć, przygotowując tzw. "wersję min" arkusza. Wówczas plik zajmuje mniej miejsca (nieco szybciej się wczytuje internaucie przez internet), ale oczywiście taki arkusz siłą rzeczy jest mało czytelny. Najczęściej więc pracujemy na zwykłym arkuszu, a "wersję min" przygotowujemy jedynie po zakończeniu pracy nad witryną (tzw. wersja produkcyjna kodu, która trafia na serwer). Zapis pozbawiony znaków białych wyglądałby tak:

body{background-color:gray;font-family:Arial;}

Oczywiście "uchwycić" w CSS możemy nie tylko znaczniki – samo posługiwanie się tagami szybko okazałoby się niewystarczające – na przykład taki zapis:

div
{
width: 350px;
}

Taki selektor złapie każdego jednego diva na stronie i ustawi mu 350 pikseli szerokości. Nie jest to sytuacja w żaden sposób wygodna, gdyż zazwyczaj struktura divów składa się z bardzo wielu różnych bloków, które siłą rzeczy potrzebują zróżnicowanych szerokości. A zatem musimy mieć w CSS możliwość złapania pojedynczego znacznika div, jednego konkretnego pojemnika (lub ewentualnie kilku, jeżeli zdarzy się tak, że jakieś bloki rzeczywiście mogą, albo nawet powinny mieć tę samą szerokość). I jak zapewne wiemy, do celu uchwycenia konkretnych elementów służy w arkuszach stylów albo klasa (ang. class) albo identyfikator (ang. ID). Poznajmy różnicę pomiędzy nimi.

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.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z całego archiwum bloga:

Komentarze

Disqus
Facebook
Pasja informatyki