Gyors tipp: a különbség pseudo-class és pseudo-element között

-

A pseudo-class és pseudo-element a HTML/CSS szabvány részei, a használatukkal virtuális állapotokat és elemeket kezelhetünk.

Pseudo-class

Egy átmeneti állapot, amit egy HTML elem kaphat. A legegyszerűbb, ha úgy képzeljük el, mint egy virtuális osztályt, amit a böngésző alkalmaz egy adott elemre, adott körülmények között.

/* Például */
:hover
:active
:focus
:checked

A példákon jól kivehető, hogy ezek mind egy-egy elem állapotai! Részletes listát a MDN oldalán találsz!

Pseudo-element

A dokumentumunk része, nem valódi HTML elem, azonban testreszabhatjuk CSS segítségével. Olyan, mint egy virtuális HTML elem – amit módosíthatunk, de nem köthető HTML címkéhez.

/* Például */
::first-line
::placeholder
::before
::after

Részletes listát a Codrops oldalán találsz!

Jelölés

A két pseudo típus bevezetésekor, a jelölés csupán egy kettőspontból állt ( :* ), azonban ez sok esetben félrevezető volt, hiszen a két típus feladata lényegesen eltér – igaz, mind a kettő virtuálisan működik. Mindezt figyelembe véve a szabvány készítői külön jelölést hoztak létre, a pseudo osztályt az eddig megszokott módon jelölhetjük, egy kettősponttal, míg a pseudo elemeket – amik újabb szereplők – két kettősponttal ( ::* )  is tudjuk már jelölni! A jelöléseknek köszönhetően így már könnyebben tudunk különbséget tenni. Fontos, hogy az egy kettőspont jelölés kivétel nélkül mindenhol működik mind két esetben. Az új fajta, elkülönített jelöléssel főként a Firefox-ban találkozhatunk jelenleg!

Összegzés

A pseudo elemek egy apró és hasznos részei a HTML/CSS szabványnak. A jelöléseik közötti különbségbe már biztosan belefutottuk, így nem árt ha tudjuk, hogy a két típus között mi a tényleges különbség.

A tipp megírásához a Sit the Test CSS Core kurzusa adta az ötletet, ahol a válaszadóknak csupán a 23% tudta, hogy mi a különbség a két típus között!

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.