Selektor ID w CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Selektor ID służy do nadawania stylów elementowi HTML, który ma określony atrybut id. W CSS zapisuje się go za pomocą znaku # przed nazwą identyfikatora.

Składnia

#pierwszy {
  width: 30%;
  float: left;
}

Ten zapis oznacza: zastosuj podane style do elementu HTML, którego identyfikator to pierwszy.

Przykład w HTML:

<div id="pierwszy">Blok pierwszy</div>

Ważne zasady

  • W dokumencie HTML wartość id powinna być unikalna.
  • Selektor ID ma większą szczegółowość niż selektor elementu, np. div, oraz selektor klasy, np. .blok.
  • Selektor ID często stosuje się do wyróżnienia pojedynczych, konkretnych elementów układu strony.

Przykład układu bloków

#pierwszy {
  float: left;
  width: 30%;
}

#drugi {
  float: left;
  width: 70%;
}

Jeżeli elementy występują po sobie w kodzie HTML, a ich szerokości sumują się do 100%, mogą ustawić się obok siebie w jednym wierszu.

W kontekście egzaminu

W pytaniach egzaminacyjnych zapis taki jak #pierwszy, #drugi, #trzeci oznacza style przypisane do konkretnych bloków strony. Aby poprawnie rozwiązać zadanie, trzeba połączyć znajomość selektora ID z działaniem właściwości float, clear i width.