Získejte větší moc nad svými webovými návrhy pomocí těchto pokročilých selektorů CSS.

CSS podporuje řadu selektorů k identifikaci prvků pro stylování, z nichž každý má svou vlastní sadu pravidel. Zatímco většina metod výběru je přímočará, pseudotřídy a pseudoprvky poskytují větší flexibilitu. Umožňují vám vybrat prvky na základě jejich stavu nebo pozice ve struktuře nebo vyberou konkrétní části obsahu.

Použití těchto selektorů může být složité a je snadné zaměnit pseudotřídy s pseudoprvky, jak je tedy rozlišujete?

Porozumění Pseudotřídám CSS

Pseudotřída CSS je jako speciální klíčové slovo, které můžete použít se selektory ke stylování prvků různými způsoby. Tato klíčová slova vám pomohou zacílit na prvky, když se stanou určité věci, například když uživatel najede myší na prvek, klepne na něj nebo něco zadá do vstupního pole.

Pseudotřídy dělají vaši webovou stránku interaktivnější a citlivější tím, že mění vzhled nebo chování prvků na základě akcí uživatele. Když vás použijte je s jinými selektory CSS, poskytují přesnou kontrolu nad stylem a interaktivitou.

Syntaxe a použití Pseudotřídy CSS

Syntaxe pro pseudotřídu CSS se skládá z dvojtečky (:) následovaný názvem pseudotřídy. Zde je základní syntaxe:

selector:pseudo-class {
/* styles */
}

V této syntaxi:

  • volič odkazuje na prvek nebo prvky, které chcete vybrat a aplikovat na ně styly. Může to být prvek HTML, třída, ID nebo složitější selektor jako kombinace. Selektor je volitelný, ale obvykle jej použijete; bez něj se vaše pseudotřída zaměří na všechny prvky, na které se může vztahovat.
  • pseudotřída je klíčové slovo, které představuje konkrétní stav nebo stav, na který chcete cílit.

CSS kategorizuje pseudotřídy do několika skupin na základě jejich funkčnosti a podmínek, na které se zaměřují. Zde jsou hlavní kategorie spolu s několika příklady:

Uživatelská interakce

:vznášet se

Vybere prvek, když na něj najede ukazatel myši.

:aktivní

Vybere prvek, když jej uživatel aktivuje, obvykle kliknutím.

:navštívil

Vybírá odkazy, které uživatel navštívil.

Strukturální

:první dítě

Vybere první podřízený prvek nadřazeného prvku.

:poslední dítě

Vybere poslední podřízený prvek nadřazeného prvku.

:n-té dítě (n)

Vybírá prvky na základě jejich pozice v rámci rodiče, což vám umožňuje zacílit na konkrétní děti.

Související s formulářem

:zakázáno

Vybere zakázané prvky formuláře.

:kontrolovány

Vybere zaškrtnutá přepínače nebo zaškrtávací políčka.

Stav prvku uživatelského rozhraní

:neplatný

Vybere neplatné prvky formuláře.

:Požadované

Vybere požadovaná pole prvků formuláře.

:volitelný

Vybere prvky formuláře, které jsou volitelná pole.

Související s odkazy

:odkaz

Vybere nenavštívené odkazy.

Na základě jazyka

:lang()

Vybírá prvky na základě jazyka zadaného v atributu „lang“.

Můžete zkusit běžný příklad pomocí použití :hover efektů na obrázky v galerii. Mezi typické styly patří zvětšení nebo vyblednutí těchto obrázků, když na ně někdo najede.

Zkoumání pseudoprvků CSS

Pseudoprvek CSS je jako speciální klíčové slovo, které můžete použít se selektory ke stylování konkrétních částí obsahu prvku nebo k vložení dalšího obsahu. Tato klíčová slova umožňují cílit a stylovat prvky na základě jejich obsahové struktury.

Pseudoprvky vylepšit design a rozvržení své webové stránky tím, že vám dává možnost stylovat prvky způsoby, které byly tradičně možné pouze se skutečnými prvky HTML.

Syntaxe a implementace pseudoprvků CSS

Pseudoprvky v CSS mají specifickou syntaxi, která zahrnuje použití dvou dvojteček (::) následovaný názvem pseudoprvku. Zde je základní syntaxe:

selector::pseudo-element {
/* styles */
}

V této syntaxi:

  • volič cílí na prvek, na který chcete pseudoprvek použít. Může to být jakýkoli platný selektor CSS, včetně žádného.
  • pseudoprvek je název pseudoprvku, na který chcete cílit. Ve selektoru můžete použít pouze jeden pseudoprvek, protože jejich kombinace ve skutečnosti nedává smysl.

Zde jsou některé z pseudoprvků:

::před

Vloží obsah před obsah vybraného prvku.

::po

Vloží obsah za obsah vybraného prvku.

::první dopis

Nastaví styl prvního písmene textu v prvku.

::výběr

Stylizuje část textu, kterou uživatel vybral kurzorem.

::popisovač

Upraví styl rámečku značky položky seznamu (např. odrážky nebo čísla v seznamu).

::tágo

Aplikuje styly na podněty v mediálních prvcích, jako je

The ::před a ::za pseudo prvky mohou být obzvláště složité na pochopení, takže jejich procvičování vám pomůže zvládnout zbytek.

Podobnosti a rozdíly

Zde jsou podobnosti a rozdíly mezi pseudotřídami a pseudoprvky CSS:

Pseudotřídy

Pseudoprvky

Syntax

Předpona s jednou dvojtečkou (:).

Předponou dvě dvojtečky (::).

Používání

Vybírejte a upravujte prvky na základě jejich stavu, pozice nebo interakce uživatele.

Upravte styl konkrétních částí obsahu prvku nebo vytvořte virtuální prvky.

Selektory

Může se vyskytovat v libovolném bodě komplexního nebo složeného selektoru.

Musí být konečnou součástí selektoru a může se objevit pouze jednou.

Vkládání obsahu

Nevkládá obsah, primárně pro stylování podle stavu.

Může vkládat obsah nebo virtuální prvky před nebo za obsah vybraného prvku.

Typografický styl

Obvykle se nepoužívá pro typografický styl.

Používá se pro textové a typografické styly (např. ::první řádek, ::první písmeno).

Cílené díly

Zaměřuje se na celé prvky.

Cílí na konkrétní části obsahu prvku.

Podpora prohlížeče

Obecně dobře podporováno.

Obecně dobře podporováno, ale některé starší prohlížeče mohou mít omezenou podporu.

Pseudotřídy a pseudoprvky jsou v CSS důležité pro vytváření různých stylů a interaktivních prvků. I když mají určité podobnosti, každý z nich má své vlastní jedinečné role ve webovém designu a vývoji.

Pseudotřídy a pseudoprvky v akci

Můžete si procvičit používání pseudotříd a pseudoprvků CSS v různých projektech, abyste zhodnotili své porozumění. Příklady jednoduchých projektů, které můžete udělat, zahrnují mimo jiné profilové karty, navigační nabídky a styly seznamů. Tyto projekty poskytují praktické zkušenosti pro zlepšení vašich dovedností CSS a zároveň začleňují interaktivitu a styl do vašich webových návrhů.