Selektor ID czy CLASS jak używać (HTML i CSS)
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.
Co znajdziesz w tym wpisie
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:
- stosowany framweork np.
- z góry ustalone zasady przez firmę, grupę np.:
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: