Ostatnio edytowany:

Selektor identyfikatora

Autor: Virtual Patriot

Przeznaczenie selektora identyfikatora

      #identyfikator { ... }
    

Selektor identyfikatora odszukuje element HTML, który posiada atrybut id o podanej przez nas wartości.

Selektor identyfikatora tworzymy za pomocą znaku # (kratka/hash), po którym należy umieścić wartość atrybutu id interesującego nas elementu HTML, dzięki czemu selektor identyfikatora może dokonać selekcji.

W tym samym dokumencie HTML nie mogą znaleźć się dwa elementy HTML o takiej samej wartości atrybutu id, ponieważ jest to traktowane przez przeglądarkę internetową jako błąd.

Dodatkowe techniczne informacje o selektorze identyfikatora

ograniczenie - elementy HTML
  • brak
ograniczenie - właściwości CSS
  • brak

Przykładowa reguła CSS, selektor identyfikatora

#lipiec {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      #lipiec { color:red; }
    
#

Do elementu HTML, który posiada atrybut id

lipiec

o wartości lipiec

color

dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #lipiec {
        color:red;
      }
    </style>
  </head>

  <body>

    <div id="lipiec">
      tekst znajdujący się w zawartości tego elementu "div" jest koloru czerwonego, ponieważ ten element HTML posiada atrybut "id" o wartości "lipiec"
    </div>

    <p>
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie posiada atrybutu "id" o wartości "lipiec"
    </p>

    <p class="lipiec">
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie posiada atrybutu "id" o wartości "lipiec", lecz atrybut "class" o wartości "lipiec"
    </p>

    <div id="czerwiec">
      tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ wartością atrybutu "id" tego elementu HTML jest wartość "czerwiec", a nie wartość "lipiec"
    </div>

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "div" jest koloru czerwonego, ponieważ ten element HTML posiada atrybut "id" o wartości "lipiec"

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie posiada atrybutu "id" o wartości "lipiec"

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie posiada atrybutu "id" o wartości "lipiec", lecz atrybut "class" o wartości "lipiec"

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ wartością atrybutu "id" tego elementu HTML jest wartość "czerwiec", a nie wartość "lipiec"

Interpretacja selektora identyfikatora

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak