Získajte väčšiu moc nad svojimi webovými návrhmi pomocou týchto pokročilých selektorov CSS.

CSS podporuje rôzne selektory na identifikáciu prvkov na úpravu štýlu, pričom každý má svoju vlastnú sadu pravidiel. Zatiaľ čo väčšina metód výberu je priamočiara, pseudotriedy a pseudoprvky poskytujú väčšiu flexibilitu. Umožňujú vám vybrať prvky na základe ich stavu alebo polohy v rámci štruktúry alebo vyberú konkrétne časti obsahu.

Používanie týchto selektorov môže byť zložité a je ľahké zamieňať pseudotriedy s pseudoprvkami, ako ich teda rozlíšiť?

Pochopenie pseudotried CSS

Pseudotrieda CSS je ako špeciálne kľúčové slovo, ktoré môžete použiť so selektormi na štýlovanie prvkov rôznymi spôsobmi. Tieto kľúčové slová vám pomôžu zacieliť na prvky, keď sa stanú určité veci, napríklad keď používateľ umiestni kurzor myši na prvok, klikne naň alebo niečo zadá do vstupného poľa.

Pseudotriedy robia vašu webovú stránku interaktívnejšou a pohotovejšou zmenou toho, ako prvky vyzerajú alebo sa správajú na základe akcií používateľa. Keď ty

instagram viewer
použite ich s inými selektormi CSS, poskytujú presnú kontrolu nad štýlom a interaktivitou.

Syntax a použitie pseudotriedy CSS

Syntax pre pseudotriedu CSS pozostáva z dvojbodky (:), za ktorým nasleduje názov pseudotriedy. Tu je základná syntax:

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

V tejto syntaxi:

  • selektor odkazuje na prvok alebo prvky, ktoré chcete vybrať a použiť na ne štýly. Môže to byť prvok HTML, trieda, ID alebo zložitejší selektor ako kombinácia. Selektor je voliteľný, ale zvyčajne ho použijete; bez neho sa vaša pseudotrieda zameria na všetky prvky, na ktoré sa môže vzťahovať.
  • pseudotrieda je kľúčové slovo, ktoré predstavuje konkrétny stav alebo stav, na ktorý chcete zacieliť.

CSS kategorizuje pseudotriedy do niekoľkých skupín na základe ich funkčnosti a podmienok, na ktoré sa zameriavajú. Tu sú hlavné kategórie spolu s niekoľkými príkladmi:

Interakcia používateľa

:vznášať sa

Vyberie prvok, keď naň umiestnite kurzor myši.

:aktívny

Vyberie prvok, keď ho používateľ aktivuje, zvyčajne kliknutím.

:navštívené

Vyberie odkazy, ktoré používateľ navštívil.

Štrukturálne

:prvorodenec

Vyberie prvý podradený prvok rodiča.

:posledné dieťa

Vyberie posledný podradený prvok rodiča.

:n-té dieťa (n)

Vyberá prvky na základe ich pozície v rámci rodiča, čo vám umožňuje zacieliť na konkrétne deti.

Súvisiace s formulárom

:zakázané

Vyberie zakázané prvky formulára.

:skontrolované

Vyberie začiarknuté prepínače alebo začiarkavacie políčka.

Stav prvku používateľského rozhrania

:neplatný

Vyberie neplatné prvky formulára.

:požadovaný

Vyberie požadované polia prvkov formulára.

:voliteľné

Vyberie prvky formulára, ktoré sú voliteľnými poľami.

Link-Related

:odkaz

Vyberie nenavštívené odkazy.

Na základe jazyka

:lang()

Vyberá prvky na základe jazyka špecifikovaného v ich atribúte „lang“.

Môžete skúsiť bežný príklad podľa použitie efektov :hover na obrázky v galérii. Medzi typické štýly patrí zväčšovanie alebo vyblednutie týchto obrázkov, keď nad nimi niekto prejde.

Skúmanie Pseudoprvkov CSS

Pseudoprvok CSS je ako špeciálne kľúčové slovo, ktoré môžete použiť so selektormi na úpravu špecifických častí obsahu prvku alebo na vloženie ďalšieho obsahu. Tieto kľúčové slová vám umožňujú zacieliť a upraviť prvky na základe ich obsahovej štruktúry.

Pseudoprvky vylepšite dizajn a rozloženie svojej webovej stránky tým, že vám dáva možnosť štýlovať prvky spôsobmi, ktoré boli tradične možné len so skutočnými prvkami HTML.

Syntax a implementácia pseudoprvkov CSS

Pseudoprvky v CSS majú špecifickú syntax, ktorá zahŕňa použitie dvoch dvojbodiek (::), za ktorým nasleduje názov pseudoprvku. Tu je základná syntax:

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

V tejto syntaxi:

  • selektor zacieli na prvok, na ktorý chcete použiť pseudoprvok. Môže to byť akýkoľvek platný selektor CSS vrátane žiadneho.
  • pseudoprvok je názov pseudoprvku, na ktorý chcete zacieliť. V selektore môžete použiť iba jeden pseudoprvok, pretože ich kombinácia v skutočnosti nedáva zmysel.

Tu sú niektoré z pseudoprvkov:

::predtým

Vloží obsah pred obsah vybratého prvku.

::po

Vloží obsah za obsah vybratého prvku.

::prvé písmeno

Upraví štýl prvého písmena textu v rámci prvku.

::výber

Štýly časti textu, ktorú používateľ vybral pomocou kurzora.

::značka

Upraví štýl rámčeka značky položky zoznamu (napr. odrážky alebo čísla v zozname).

::narážka

Aplikuje štýly na podnety v mediálnych prvkoch, ako je

The ::pred a ::za pseudo prvky môžu byť obzvlášť zložité na pochopenie, takže ich precvičovanie vám pomôže zvládnuť zvyšok.

Podobnosti a rozdiely

Tu sú podobnosti a rozdiely medzi pseudotriedami a pseudoprvkami CSS:

Pseudotriedy

Pseudoprvky

Syntax

Predpona s jednou dvojbodkou (:).

Predpona s dvoma dvojbodkami (::).

Použitie

Vyberte a upravte prvky na základe ich stavu, pozície alebo interakcie používateľa.

Štýlujte špecifické časti obsahu prvku alebo vytvorte virtuálne prvky.

Selektory

Môže sa vyskytnúť v ktoromkoľvek bode v rámci komplexného alebo zloženého selektora.

Musí byť posledným komponentom selektora a môže sa zobraziť iba raz.

Vkladanie obsahu

Nevkladá obsah, predovšetkým na úpravu štýlu podľa stavu.

Môže vložiť obsah alebo virtuálne prvky pred alebo za obsah vybratého prvku.

Typografický štýl

Zvyčajne sa nepoužíva na typografický štýl.

Používa sa na úpravu textu a typografického štýlu (napr. ::prvý riadok, ::prvé písmeno).

Cielené diely

Zameriava sa na celé prvky.

Zacieľuje na konkrétne časti obsahu prvku.

Podpora prehliadača

Vo všeobecnosti dobre podporované.

Vo všeobecnosti dobre podporované, ale niektoré staršie prehliadače môžu mať obmedzenú podporu.

Pseudotriedy a pseudoprvky sú v CSS dôležité na vytváranie rôznych štýlov a interaktívnych prvkov. Aj keď majú určité podobnosti, každý z nich má svoje vlastné jedinečné úlohy vo webovom dizajne a vývoji.

Pseudotriedy a pseudoprvky v akcii

Môžete si precvičiť používanie pseudotried a pseudoprvkov CSS v rôznych projektoch, aby ste zhodnotili svoje porozumenie. Príklady jednoduchých projektov, ktoré môžete urobiť, zahŕňajú okrem iného profilové karty, navigačné ponuky a štýly zoznamu. Tieto projekty poskytujú praktické skúsenosti na zlepšenie vašich zručností CSS a zároveň začleňujú interaktivitu a štýl do vašich webových návrhov.