: cieľ - Triky CSS | Almanach CSS 2025

:targetVolič pseudo CSS zápasy, keď hash v URL a id prvku sú rovnaké. Ak je napríklad aktuálna adresa URL:

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

A toto existovalo v HTML:

 Content

Tento selektor by zodpovedal:

:target ( background: yellow; )

A tento sectionprvok by mal žlté pozadie.

S týmto generikom selektora (zodpovedajúcim všetkému, čo sa stane cieľovým), ak by sa adresa URL zmenila na koniec #faqa existoval ďalší prvok s ID faq, tento selektor by sa znova zhodoval a #faqprvok by mal žlté pozadie.

Môžete to obmedziť tým, že budete konkrétni, na ktoré prvky sa chcete zamerať

#voters:target ( )

Kedy by ste to použili?

Jednou z možností je, keď chcete štýl so „stavmi“. Ak má stránka určitý hash, je v tomto stave. Nie je to také všestranné ako manipulácia s názvami tried (pretože môže byť iba jeden a môže súvisieť iba s jedným prvkom), ale je to podobné. Čokoľvek, čo môžete urobiť, môžete zmeniť triedu a zmeniť stav, ktorý by ste mohli urobiť, keď je prvok v :target. Napríklad: zmena farieb, zmena polohy, zmena obrázkov, skrytie / zobrazenie vecí, čokoľvek.

Použil by som tieto pravidlá, keď :targetje dobrá voľba:

Keď je potrebný „štát“
Kedy je prijateľné správanie sa pri skoku nadol / hash-link
Kedy je prijateľné ovplyvniť históriu prehliadača

Ako získavate hašovanie v adresách URL?

Najbežnejším spôsobom je kliknutie na odkaz, ktorý obsahuje hash. Môže to byť interný odkaz (rovnaká stránka) alebo úplná adresa URL, ktorá sa nakoniec končí hodnotou hash a hodnotou. Príklady:

Go To There Go To There

Skákacie správanie

Bez ohľadu na to, či ide o odkaz na tú istú stránku, alebo nie, chovaním prehliadača je posúvanie stránky, kým sa tento prvok nenachádza v hornej časti stránky . Alebo pokiaľ je to možné, ak sa nedokáže posúvať tak ďaleko. To je dosť dôležité vedieť, pretože to znamená, že využitie tohto „uvedeného“ správania je trochu zložité / obmedzené.

Napríklad som raz vyskúšal rôzne techniky na replikáciu funkčných kariet CSS, ale nakoniec som sa rozhodol, že použitie začiarkavacieho políčka je lepší nápad, pretože sa vyhneme problémom so skákaním na stránke. Ian Hansson z CSS Science má tiež niekoľko príkladov kariet. Jeho tretí príklad používa :targeta absolútne umiestnené prvky skryté nad hornou časťou stránky, aby sa zabránilo skákaniu stránky. Je to šikovné, ale celkovo dokonalé riešenie, pretože by to znamenalo, že by stránka vyskočila smerom nahor, ak by záložky boli na stránke ďalej.

Viac informácií

Článok tu o CSS-Tricks: Zapnuté: cieľ
Selektory úrovne 4 špec
Jednoduchá galéria obrázkov pomocou: target (trpí skokom na stránke, dobrým príkladom toho) od Chrisa Heilmanna
Ukážka techniky žltého vyblednutia (aj keď pre existujúci obsah, nie pre novo pridaný obsah) z aplikácie Web Designer Notebook.
Cieľ CSS, doslova, Caleb Ogden.
CSS: cieľ pre návrhy mimo obrazovku
Dokumenty MDN