Ezekkel a fejlett CSS-szelektorokkal nagyobb hatalmat szerezhet webdizájnjai felett.

A CSS számos szelektort támogat a stíluselemek azonosításához, mindegyik saját szabálykészlettel. Míg a legtöbb kiválasztási módszer egyszerű, az pszeudoosztályok és pszeudoelemek nagyobb rugalmasságot biztosítanak. Lehetővé teszik az elemek kiválasztását a struktúrán belüli állapotuk vagy helyzetük alapján, vagy kiválasztják a tartalom meghatározott részeit.

Ezeket a kiválasztókat nehézkes lehet használni, és könnyű összekeverni az álosztályokat pszeudoelemekkel, így hogyan lehet megkülönböztetni őket?

A CSS pszeudoosztályok megértése

A CSS pszeudoosztály olyan, mint egy speciális kulcsszó, amelyet szelektorokkal használhat az elemek különböző stílusához. Ezek a kulcsszavak segítenek megcélozni az elemeket, amikor bizonyos dolgok történnek, például amikor a felhasználó egy elem fölé viszi az egeret, rákattint vagy beír valamit a beviteli mezőbe.

Az álosztályok interaktívabbá és érzékenyebbé teszik weboldalát azáltal, hogy megváltoztatják az elemek megjelenését vagy viselkedését a felhasználói műveletek alapján. Amikor te

használja őket más CSS-választókkal, pontos vezérlést biztosítanak a stílus és az interaktivitás felett.

CSS pszeudoosztályú szintaxis és használat

A CSS pszeudoosztály szintaxisa kettőspontból (:) után egy álosztály neve. Íme az alapvető szintaxis:

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

Ebben a szintaxisban:

  • választó arra az elemre vagy elemekre utal, amelyeket ki szeretne választani, és amelyekre stílusokat kíván alkalmazni. Ez lehet egy HTML-elem, egy osztály, egy azonosító, vagy egy összetettebb választó, például egy kombináció. A választó nem kötelező, de általában használ egyet; enélkül a pszeudoosztályod minden elemet megcéloz, amelyre vonatkozhat.
  • álosztály az a kulcsszó, amely egy adott, megcélozni kívánt állapotot vagy állapotot jelöl.

A CSS a pszeudoosztályokat funkcionalitásuk és az általuk megcélzott feltételek alapján több csoportba sorolja. Íme a főbb kategóriák néhány példával együtt:

Felhasználói interakció

:lebeg

Kijelöl egy elemet, amikor az egérmutató rámutat.

:aktív

Kijelöl egy elemet, amikor a felhasználó aktiválja, általában kattintással.

:látogatott

Kiválasztja azokat a hivatkozásokat, amelyeket a felhasználó meglátogatott.

Szerkezeti

:első gyerek

Kijelöli a szülő első gyermek elemét.

:utolsó gyerek

Kijelöli a szülő utolsó gyermek elemét.

:nth-child (n)

Az elemeket a szülőn belüli pozíciójuk alapján választja ki, lehetővé téve, hogy konkrét gyermekeket célozzon meg.

Formával kapcsolatos

:Tiltva

Kijelöli a letiltott űrlapelemeket.

:ellenőrizve

Kijelöli a bejelölt rádiógombokat vagy jelölőnégyzeteket.

UI elem állapota

:érvénytelen

Érvénytelen űrlapelemeket választ ki.

:kívánt

Kijelöli az űrlapelemek kötelező mezőit.

:választható

Kijelöli az űrlapelemeket, amelyek nem kötelező mezők.

Linkekkel kapcsolatos

:link

Kiválasztja a nem látogatott hivatkozásokat.

Nyelvi alapú

:lang()

Az elemeket a „lang” attribútumban megadott nyelv alapján választja ki.

Megpróbálhat egy általános példát a következővel :hover effektusok alkalmazása a képekre egy galériában. A tipikus stílusok közé tartozik ezeknek a képeknek a nagyítása vagy halványítása, amikor valaki föléjük viszi az egérmutatót.

A CSS pszeudoelemek felfedezése

A CSS pszeudoelem olyan, mint egy speciális kulcsszó, amelyet a szelektorokkal használhat az elem tartalmának bizonyos részeinek stílusához vagy további tartalom beszúrásához. Ezek a kulcsszavak lehetővé teszik az elemek célzását és stílusát a tartalmi szerkezetük alapján.

Pszeudo-elemek javíthatja weboldala megjelenését és elrendezését azáltal, hogy lehetőséget ad arra, hogy olyan stílusokat alakítson ki az elemeken, amelyek hagyományosan csak valódi HTML-elemekkel voltak lehetségesek.

CSS pszeudoelem szintaxis és megvalósítás

A CSS-ben a pszeudoelemek sajátos szintaxissal rendelkeznek, amely magában foglalja két kettőspont használatát (::) után az álelem neve. Íme az alapvető szintaxis:

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

Ebben a szintaxisban:

  • választó azt az elemet célozza meg, amelyre a pszeudoelemet alkalmazni szeretné. Bármilyen érvényes CSS-választó lehet, beleértve az egyiket sem.
  • pszeudo-elem a megcélozni kívánt pszeudoelem neve. A szelektorban csak egy pszeudoelem használható, mivel ezeknek nincs igazán értelme kombinálni.

Íme néhány pszeudoelem:

::előtt

Tartalmat szúr be a kiválasztott elem tartalma elé.

::után

Tartalmat szúr be a kiválasztott elem tartalma mögé.

::első levél

Stíluszi a szöveg első betűjét egy elemen belül.

::kiválasztás

Stíluszi a szövegnek azt a részét, amelyet a felhasználó a kurzorral kiválasztott.

::jelző

Stílusokat ad egy listaelem jelölőmezőjének (pl. a lista pontjának vagy számának).

::dákó

Stílusokat alkalmaz a médiaelemek jelzéseire, például

A ::pseudo elemek előtt és ::után különösen bonyolult lehet megérteni, így ezek gyakorlása segít elsajátítani a többit.

Hasonlóságok és különbségek

Íme a CSS pszeudoosztályai és pszeudoelemei közötti hasonlóságok és különbségek:

Álosztályok

Pszeudo-elemek

Szintaxis

Előtagja egyetlen kettősponttal (:).

Előtagként két kettőspont (::).

Használat

Az elemek állapota, pozíciója vagy felhasználói interakciója alapján válasszon és stílusos legyen.

Stílusozzon egy elem tartalmának meghatározott részeit, vagy hozzon létre virtuális elemeket.

Kiválasztók

Egy komplex vagy összetett szelektor bármely pontján előfordulhat.

A választó utolsó összetevőjének kell lennie, és csak egyszer jelenhet meg.

Tartalom beillesztése

Nem szúr be tartalmat, elsősorban az állapot szerinti stílushoz.

Beszúrhat tartalmat vagy virtuális elemeket a kiválasztott elem tartalma elé vagy után.

Tipográfiai stílus

Tipográfiai stílushoz általában nem használják.

Szöveg- és tipográfiai stílusokhoz (pl. ::első sor, ::első betű) használatos.

Célzott alkatrészek

Teljes elemeket céloz meg.

Egy elem tartalmának meghatározott részeit célozza meg.

Böngésző támogatás

Általában jól támogatott.

Általában jól támogatott, de egyes régebbi böngészők támogatása korlátozott lehet.

A pszeudoosztályok és pszeudoelemek fontosak a CSS-ben a különféle stílusok és interaktív funkciók létrehozásához. Bár van némi hasonlóságuk, mindegyiknek megvan a saját egyedi szerepe a webdesignban és -fejlesztésben.

Álosztályok és pszeudoelemek akcióban

Gyakorolhatja a CSS pszeudoosztályok és pszeudoelemek használatát különböző projektekben, hogy értékelje megértését. Az egyszerű projektekre példák többek között a profilkártyák, a navigációs menük és a listastílus. Ezek a projektek gyakorlati tapasztalatot nyújtanak CSS-készségeinek fejlesztéséhez, miközben interaktivitást és stílust építenek be a webdesignba.