: cel - CSS-Tricks | Almanach CSS 2025

:targetSelektor pseudo CSS pasuje gdy hash w adresie URL i identyfikator elementu są takie same. Na przykład, jeśli aktualny adres URL to:

https://css-tricks.com/#voters

I to istniało w HTML:

 Content

Ten selektor będzie pasował:

:target ( background: yellow; )

A ten sectionelement miałby żółte tło.

Z tym ogólnym selektorem (pasującym do wszystkiego, co jest celem), gdyby adres URL zmienił się tak, aby kończył się na #faqi istniał inny element o identyfikatorze faq, ten selektor pasowałby ponownie, a #faqelement miałby żółte tło.

Możesz to ograniczyć, określając dokładnie, na które elementy chcesz kierować reklamy, na przykład

#voters:target ( )

Kiedy użyjesz tego?

Jedną z możliwości jest stylizacja z „stanami”. Gdy strona ma określony skrót, jest w tym stanie. Nie jest tak wszechstronna, jak manipulowanie nazwami klas (ponieważ może istnieć tylko jedna i może być powiązana tylko z jednym elementem), ale jest podobna. Wszystko, co możesz zrobić, zmieniając klasę, aby zmienić stan, możesz zrobić, gdy element jest w :target. Na przykład: zmień kolory, zmień położenie, zmień obrazy, ukryj / pokaż rzeczy, cokolwiek.

Użyłbym tych praktycznych zasad, kiedy :targetjest to dobry wybór:

Kiedy potrzebny jest „stan”
Kiedy zachowanie Jump-Down / Hash-Link jest dopuszczalne
Kiedy dopuszczalny jest wpływ na historię przeglądarki

Jak otrzymujesz hashe w adresach URL?

Najczęstszym sposobem jest kliknięcie przez użytkownika odsyłacza zawierającego skrót. Może to być link wewnętrzny (do tej samej strony) lub w pełni kwalifikowany adres URL, który kończy się skrótem i wartością. Przykłady:

Go To There Go To There

Skakanie

Niezależnie od tego, czy jest to łącze do tej samej strony, czy nie, zachowanie przeglądarki polega na przewijaniu strony do momentu, gdy ten element znajdzie się na górze strony . Lub, o ile to możliwe, jeśli nie może przewijać tak daleko. Jest to raczej ważne, aby wiedzieć, ponieważ oznacza to, że wykorzystanie tego „określonego” zachowania jest nieco skomplikowane / ograniczone.

Na przykład raz wypróbowałem różne techniki replikacji funkcjonalnych zakładek CSS, ale ostatecznie zdecydowałem, że użycie hackowania pola wyboru jest lepszym pomysłem, ponieważ pozwala uniknąć problemów ze skokami stron. Ian Hansson z CSS Science ma również kilka przykładów zakładek. W trzecim przykładzie zastosowano :targetelementy i bezwzględnie pozycjonowane elementy ukryte nad górną częścią strony, aby zapobiec przeskakiwaniu strony. To sprytne, ale ogólnie doskonałe rozwiązanie, ponieważ oznaczałoby to, że strona przeskoczyłaby w górę, gdyby zakładki znalazły się dalej na stronie.

Więcej informacji

Artykuł tutaj o CSS-Tricks: On: target
Selektory Level 4 spec
Prosta galeria obrazów wykorzystująca: target (cierpi z powodu skoku strony, dobry przykład) autorstwa Chrisa Heilmanna
Demo techniki żółtego zanikania (chociaż dla istniejącej zawartości, a nie nowo dodanej zawartości) z Notatnika Web Designera.
Cel CSS, dosłownie, autorstwa Caleba Ogdena.
CSS: cel dla projektów poza ekranem
MDN docs