#id
Wybiera element o podanym identyfikatorze z atrybutu id. Ma bardzo wysoką specyficzność, więc jego reguły trudno potem nadpisać.
Przykład
##faq {
padding: 12px;
border-radius: 12px;
transition: background-color 0.3s;
}
#faq:target {
background: rgb(124 58 237 / 0.2);
outline: 2px solid #a78bfa;
}<p style="margin: 0 0 10px;"><a href="#faq" style="color: #c4b5fd;">Przejdź do pytań i odpowiedzi</a></p>
<section id="faq">
<strong>Pytania i odpowiedzi</strong>
<p style="margin: 4px 0 0; color: #a1a1aa;">Ta sekcja ma id="faq". Kliknij link powyżej, a zostanie podświetlona.</p>
</section>Kliknij link w podglądzie. Adres kończy się wtedy na #faq, a sekcja pasuje do pseudoklasy :target.
Definicja i zastosowanie
#Selektor identyfikatora zaczyna się znakiem #: reguła #koszyk { … } trafia w element z atrybutem id="koszyk". Identyfikator powinien być unikalny w całym dokumencie, więc taki selektor zwykle wskazuje dokładnie jeden element.
Jego specyficzność to (1, 0, 0). Jeden identyfikator wygrywa z dowolną liczbą klas, dlatego reguły z # trudno później nadpisać. Z tego powodu większość zespołów stylizuje komponenty klasami, a identyfikatorów używa do kotwic, etykiet formularzy (<label for>) i JavaScriptu.
Identyfikatory przydają się w nawigacji wewnątrz strony. Link href="#cennik" przewija do elementu z id="cennik", a ten element pasuje wtedy do pseudoklasy :target, którą można podświetlić. Wielkość liter ma znaczenie, a identyfikator zaczynający się od cyfry wymaga w CSS ucieczki znakowej.
Jeśli musisz trafić w element po identyfikatorze, a nie chcesz podbijać wagi, użyj selektora atrybutu [id="koszyk"] (waga klasy) albo :where(#koszyk) (waga zero).
Składnia
##identyfikator { właściwość: wartość; }Warianty zapisu
#- Element z
id="logo". Klasa o tej samej nazwie nie pasuje, bo to zupełnie inny atrybut. (1, 0, 1)
Identyfikator jako punkt zaczepienia: każdyspanwewnątrz#menu. Cała reguła dostaje wagę identyfikatora.(0, 1, 0)
Selektor atrybutu trafia w ten sam element, ale waży tyle co klasa, a nie identyfikator.(0, 0, 0)
Ten sam element z wagą zero. Taką regułę nadpisze nawet zwykły selektor typu.
Warianty zapisu w praktyce
##logo
id="logo". Klasa o tej samej nazwie nie pasuje, bo to zupełnie inny atrybut.#logo { background: #7c3aed; color: #fff; }[id="logo"]
[id="logo"] { background: #7c3aed; color: #fff; }:where(#logo)
:where(#logo) { background: #7c3aed; color: #fff; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do stylowania wybieraj klasy. Identyfikatory zostaw dla kotwic, etykiet formularzy i skryptów, a w CSS używaj ich oszczędnie.
- Nie powtarzaj tego samego
idna stronie. Przeglądarka zniesie błąd, alegetElementById, etykiety<label for>i kotwice zadziałają tylko dla pierwszego takiego elementu. - Sekcje, do których prowadzą linki z kotwicą, wyróżnij pseudoklasą
:target. Użytkownik od razu zobaczy, gdzie wylądował.
Powiązane hasła
#- .klasaWybiera elementy, które mają podaną klasę w atrybucie class. Najczęściej używany selektor do stylowania komponentów.
- [atrybut]Wybiera elementy po atrybucie HTML i jego wartości: dokładnej, początku, końcu, fragmencie albo słowie z listy.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
- :where()Działa jak :is(), ale zawsze ma zerową specyficzność. Idealna do stylów bazowych, które łatwo nadpisać.
- A BSpacja między selektorami wybiera elementy B leżące gdziekolwiek wewnątrz elementu A, na dowolnej głębokości.
Widzisz błąd albo brakuje przykładu? Napisz do nas.