: cíl - Triky CSS | Almanach CSS 2025

:targetVolič pseudo CSS zápasy, když hash v URL a id prvku jsou stejné. Například pokud je aktuální adresa URL:

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

A toto existovalo v HTML:

 Content

Tento volič by odpovídal:

:target ( background: yellow; )

A ten sectionprvek by měl žluté pozadí.

S tímto generikem selektoru (odpovídá všemu, co se stane terčem), pokud by se adresa URL změnila tak, aby skončila #faqa existoval další prvek s ID faq, tento selektor by se znovu shodoval a #faqprvek by měl žluté pozadí.

Mohli byste to omezit tím, že budete konkrétně určovat, na které prvky chcete cílit

#voters:target ( )

Kdy byste to použili?

Jednou z možností je, když chcete styl se „stavy“. Když má stránka určitý hash, je v tomto stavu. Není to tak univerzální jako manipulace s názvy tříd (protože může existovat pouze jeden a může souviset pouze s jedním prvkem), ale je to podobné. Cokoli můžete udělat, když změníte třídu, abyste změnili stav, můžete udělat, když je prvek v :target. Například: změnit barvy, změnit polohu, změnit obrázky, skrýt / ukázat věci, cokoli.

Použil bych tato pravidla, když :targetje dobrá volba:

Když je potřeba „stát“
Když je chování seskoku / hash-link přijatelné
Když je přijatelné ovlivnit historii prohlížeče

Jak získáte hash v adresách URL?

Nejběžnějším způsobem je, když uživatel klikne na odkaz obsahující hash. Může to být interní odkaz (stejná stránka) nebo plně kvalifikovaná adresa URL, která končí hashem a hodnotou. Příklady:

Go To There Go To There

Chování při skákání

Bez ohledu na to, zda se jedná o odkaz na stejnou stránku, či nikoli, chováním prohlížeče je posouvání stránky, dokud se tento prvek nenachází v horní části stránky . Nebo pokud to půjde, pokud to nedokáže posunout tak daleko. To je docela důležité vědět, protože to znamená, že využití tohoto „uvedeného“ chování je trochu složité / omezené.

Například jsem jednou vyzkoušel různé techniky k replikaci funkčních karet CSS, ale nakonec jsem se rozhodl, že použití zaškrtávacího políčka hack byl lepší nápad, protože se vyhne problémům se skákáním stránek. Ian Hansson z CSS Science má také několik příkladů karet. Jeho třetí příklad používá :targeta absolutně umístěné prvky skryté nad horní částí stránky, aby se zabránilo chování skákání stránky. Je to chytré, ale celkově dokonalé řešení, protože by to znamenalo, že by stránka vyskočila nahoru, pokud by záložky byly na stránce dále dolů.

Více informací

Článek zde o CSS-Tricks: Zapnuto: cíl
Selektory úrovně 4 spec
Jednoduchá galerie obrázků využívající: target (trpí skokem na stránce, dobrým příkladem toho) od Chrisa Heilmanna
Ukázka techniky žluté prolínání (i když pro existující obsah, ne nově přidaný obsah) z poznámkového bloku Web Designer.
Cíl CSS, doslova, od Caleba Ogdena.
CSS: cíl pro návrhy mimo obrazovku
Dokumenty MDN