Szczegółowe wyjaśnienie wybieraczy id CSS

Selektory ID pozwalają określić styl niezależnie od elementów dokumentu.

Selektory ID CSS

W pewnych aspektach selektory ID są podobne do selektorów klas, chociaż istnieją również istotne różnice.

Gramatyka

Po pierwsze, selektor ID zaczyna się od znaku # - zwany również znakiem szachownicy lub znakiem wiertniczym.

Spójrz na poniższe reguły:

*#intro {font-weight:bold;}

Jak selektory klas, selektory ID mogą pomijać selektory gwiazdkowe. Poprzedni przykład można również napisać jako:

#intro {font-weight:bold;}

Efekt tego selektora będzie taki sam.

Druga różnica polega na tym, że selektor ID nie odnosi się do wartości atrybutu class, bez wątpienia odnosi się do wartości atrybutu id.

Poniżej znajduje się przykład rzeczywistego selektora ID:

<p id="intro">To jest akapit wprowadzający.</p>

Spróbuj sam!

Klasa czy selektor ID?

W rozdziale o selektorach klas omówiliśmy, że można przypisać klasę do dowolnej liczby elementów. W poprzednim rozdziale nazwa klasy 'ważna' została zastosowana do elementów p i h1, a może być zastosowana do wielu innych elementów.

Różnica 1: Można go używać tylko raz w dokumencie

W przeciwieństwie do klas, w dokumencie HTML selektor ID jest używany tylko raz i tylko raz.

Różnica 2: Nie można używać listy słów ID

W przeciwieństwie do selektorów klas, selektory ID nie mogą być używane razem, ponieważ atrybut ID nie pozwala na listę słów oddzielonych spacjami.

Różnica 3: ID mogą mieć więcej znaczeń

Podobnie jak klasy, ID mogą być wybierane niezależnie od elementów. W niektórych przypadkach wiesz, że w dokumencie pojawi się określona wartość ID, ale nie wiesz, który element to będzie. Chcesz zadeklarować niezależny selektor ID. Na przykład, możesz wiedzieć, że w danym dokumencie będzie element o wartości ID 'najważniejsze'. Nie wiesz, czy to będzie akapit, fraza, lista lub nagłówek. Wiesz tylko, że każdy dokument będzie miał taką najważniejszą treść, która może się znaleźć w dowolnym elemencie i może pojawić się tylko jeden raz. W takim przypadku możesz napisać następującą regułę:

#najważniejsze {color:red; background:yellow;}

Ta reguła będzie pasować do poniższych elementów (które nie mogą występować w tym samym dokumencie, ponieważ mają te same wartości ID):

<h1 id="mostImportant"To jest ważne!
<em id="mostImportant"To jest ważne!
<ul id="mostImportant">To jest ważne!</ul>

Spróbuj sam:

Wrażliwe na wielkość liter

Proszę zauważyć, że wywoływacze klas i id mogą być wrażliwe na wielkość liter. To zależy od języka dokumentu. HTML i XHTML definiują wartości klas i id jako wrażliwe na wielkość liter, więc wartości klas i id muszą pasować wielkością liter do wartości odpowiednich w dokumencie.

Dlatego dla poniższego CSS i HTML, elementy nie staną się pogrubione:

#intro {font-weight:bold;}
<p id="Intro">To jest akapit wprowadzający.</p>

Dzięki różnicy w wielkości liter litery 'i', wywoływacz nie pasuje do powyższych elementów.