Kurs HTML

Wprowadzenie: Identyfikacja unikalnych elementów

Podczas gdy klasy pozwalają grupować wiele elementów w celu nadania im wspólnych stylów, czasami potrzebujemy wybrać i ostylować jeden, **unikalny** element na stronie. Do tego celu służy **selektor ID**.

Selektor ID wybiera element na podstawie wartości jego atrybutu id w HTML. Kluczową zasadą jest, że wartość atrybutu id **musi być unikalna** w całym dokumencie HTML – żaden inny element nie może mieć tego samego ID.

Składnia

W HTML, aby nadać elementowi unikalny identyfikator, używamy atrybutu id:

<div id="naglowek-strony">...</div>
<p id="wstep">To jest akapit wstępny.</p>
<ul id="menu-glowne">...</ul>Kopiuj

Ważne: Wartość ID musi być unikalna na całej stronie!

W CSS, aby wybrać element na podstawie jego ID, używamy znaku **hash (#)** bezpośrednio przed nazwą identyfikatora:

/* Styl dla elementu o ID 'naglowek-strony' */
#naglowek-strony {
  background-color: #eee;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

/* Styl dla elementu o ID 'wstep' */
#wstep {
  font-size: 1.2em;
  font-style: italic;
  color: #555;
}

/* Styl dla elementu o ID 'menu-glowne' */
#menu-glowne {
  list-style: none;
  padding-left: 0;
}Kopiuj

W powyższym przykładzie, style zostaną zastosowane wyłącznie do tych konkretnych elementów, które mają przypisane odpowiednie ID.

Uwaga: W przeciwieństwie do klas, nie można łączyć selektora ID z selektorem typu w taki sam sposób (np. div#naglowek-strony). Ponieważ ID jest już unikalne, dodawanie selektora typu jest zbędne i nie zwiększa specyficzności w praktyczny sposób (choć technicznie jest dozwolone).

Specyficzność selektora ID

Selektor ID ma **bardzo wysoką specyficzność**. W notacji specyficzności (A, B, C, D), selektor ID ma wartość (0, 1, 0, 0).

• Jest znacznie bardziej specyficzny niż selektor klasy (0,0,1,0), selektor atrybutu, pseudoklasa, selektor typu (0,0,0,1) i selektor uniwersalny (0,0,0,0).
• Jest mniej specyficzny tylko niż style inline (1,0,0,0) i deklaracje z !important.

Ze względu na wysoką specyficzność, style zdefiniowane za pomocą selektora ID są trudne do nadpisania przez inne selektory (bez użycia !important lub jeszcze bardziej specyficznych selektorów ID). To jeden z powodów, dla których zaleca się ostrożne używanie ID do stylizowania.

p {
  color: blue; /* Specyficzność: 0,0,0,1 */
}

.moj-paragraf {
  color: green; /* Specyficzność: 0,0,1,0 */
}

#unikalny-paragraf {
  color: purple; /* Specyficzność: 0,1,0,0 - nadpisze poprzednie style dla 
 */
}Kopiuj
Kopiuj

Zastosowania i dobre praktyki

• Identyfikacja głównych sekcji strony: ID są często używane do oznaczania głównych, unikalnych obszarów strony, takich jak nagłówek (#header), stopka (#footer), główna treść (#main-content), nawigacja (#main-nav).
• Kotwice (Anchors) dla linków: Atrybut id jest używany do tworzenia wewnętrznych linków (kotwic) na stronie (np. <a href="#sekcja1"> przeniesie do elementu <div id="sekcja1">).
• Interakcje JavaScript: ID są bardzo wygodne do wybierania konkretnych elementów w kodzie JavaScript w celu manipulacji nimi (np. document.getElementById('mojElement')).
• Ostrożność przy stylizowaniu: Ze względu na wysoką specyficzność i brak możliwości reużycia, **generalnie odradza się nadmierne używanie selektorów ID do stylizowania**. Preferuje się używanie klas, które są bardziej elastyczne i łatwiejsze w zarządzaniu. Używaj ID do stylizowania tylko wtedy, gdy masz absolutną pewność, że styl dotyczy tylko tego jednego, unikalnego elementu i nie będzie potrzeby jego reużycia.
• Unikalność: Zawsze pamiętaj o bezwzględnym wymogu unikalności ID na stronie. Zduplikowane ID prowadzą do niepoprawnego HTML i mogą powodować nieprzewidywalne zachowanie CSS i JavaScript.