Selektor ID czy CLASS jak używać (HTML i CSS)

Czas czytania: 2 minut

Id (identyfikatory) i Class (klasy) to dwa rodzaje elementów (selektor) umożliwiające „połączenie” / „przypisanie” ze sobą / do siebie HTML i CSS (ang. Cascading Style Sheets). Dzięki nim nie musimy wprowadzać kodu CSS bezpośrednio na dany element.

Czym są ID i jak używać

Atrybut id służy do identyfikacji elementów kodu HTML. Jest więc identyfikatorem. W praktyce oznacza to, że na danej stronie / podstronie powinien być tylko jeden element posiadający konkretne id. Tak by bez problemu można je między sobą odróżniać.

Przykładowo dodane id do elementu <div>:

<div id="jakies_id"></div>

Nie robimy z kolei w następujący sposób:

<div id="jakies_id"></div> <p id="jakies_id"></p>

Być może brzmi to trochę dziwnie jednak jeśli się dobrze zastanowić to na stronie istnieje wiele unikatowych elementów takich jak: header (nagłówek), footer (stopka). Elementy te nie powinny powtarzać się w kodzie strony.

Przykładowe wykorzystanie

W sytuacji kiedy np. budujemy stronę typu one page. Z pomocą id – czyli indywidualnych identyfikatorów oznaczamy sekcje, do których menu ma nas przenosić (skrolować) po kliknięciu w konkretny link.

Kod w menu

<a href="#nasz_element">element</a>

id elementu

<div id="nasz_element">konkretna treść</div>

Jak widać odwołanie tworzymy poprzez dodanie do id (jego „nazwy”) znacznika #.

ID jako selektor

Id poza rolą identyfikatora mogą być wykorzystywane do modyfikacji wyglądu i zachowania z pomocą CSS. Odwołanie do elementu id z pomocą CSS robimy analogicznie:

#nasz_element {color:#ccc;}

W praktyce więc by odwołać się do ID w CSS używamy znacznika „#” następnie nazwa ID a pomiędzy nawiasami klamrowymi umieszczamy właściwości, które chcemy użyć.

Czym są class i jak używać

Nieco inaczej jest z klasami (class) w ich przypadku możemy odwoływać się jednocześnie do wielu różnych elementów. Klasy możemy też ze sobą łączyć co w praktyce oznacza, że obiekt może ich mieć jednocześnie nawet kilka.

Przykładowo dodane class do elementu <div>:

<div class="jakas-klasa"></div>
<div class="header"></div>

Selektor CSS

Głównym zadaniem klasy jest wpływanie na wygląd, cechy i zachowanie konkretnego elementu strony oraz czasem na obiekty, które się w nim znajdują. W CSS do klasy odwołujemy się poprzez dodanie przed nazwą klasy „.” (kropki) np.:

.header{color:#ccc;}

Jak nazwać klasy

Nazewnictwo klas jest praktycznie dowolne jednak nie zalecane. Zazwyczaj bowiem stosuje się różne metodyki z pomocą, których tworzymy nazwę dla klasy. Metodyka ta jest narzucana przez:

Jeśli chcecie się czegoś więcej dowiedzieć zapraszam do innych artykułów na temat metodyk tworzenia struktury klas CSS i HTML.

źródła:

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go

%d bloggers like this: