A CSS fejlődésének köszönhetően számos ritkábban használt, egy-egy specifikus területre szánt kijelölőt, pseudo osztályt, elemet, függvényt használhatunk a fejlesztés során.

css-kijelolok

:not()

Egyszerű tagadásos kijelölés. A legegyszerűbb, ha úgy gondolunk rá, mint egy módosításra az eredeti kijelölőn. Tegyük fel hogy adott a következő lista:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Ebben a listában szeretnénk kijelölni az összes <li> elemet, kivéve az utolsót. Ezt a következőképpen tehetjük meg:

li:not(:last-child) {...}

A kijelölő első részével kijelöltük az összes <li> elemet, míg a másodikkal elvettük belőle azt, amelyikre nincs szükségünk, vagyis az utolsó elemet. Írtam már róla egy kicsit részletesebben!

:required, :valid, :invalid

Ezt a három pseudo osztályt input validálásnál használhatjuk. A nevükből jól kivehető, hogy milyen célt szolgálnak. HTML oldalról a működésüket a required és a pattern tulajdonság szabályozza.

A :valid és az :invalid esetében zavaró lehet, hogy akkor is megjelenik a formázás, ha még nincs semmi a beviteli mezőkben.

See the Pen 286e2353336fbf17046c884cb37dea42 by Adam Laki (@adamlaki) on CodePen.

:target()

A :target pseudo kijelölő elég ismeretlen a webfejlesztésben. A kijelölő lényege, hogy a hagyományos horgony hivatkozáshoz kapcsolódóan tudjuk kijelölni a megadott elemet.

Ezzel a módszerrel lényegében összeköthetünk két elemet – a köztük létrehozott hivatkozással – csupán CSS-el. Gyakorlatban a legnépszerűbb használati eset a felugró ablak készítése.

See the Pen Felugró ablak :target használatával by Adam Laki (@adamlaki) on CodePen.

Részleges kijelölők

A részleges kijelölőket a tulajdonság kijelölő használata során hívhatjuk segítségül. A tulajdonság kijelölés a következőképpen néz ki:

div[class="menu"]

A szintaktika egészen egyszerű:

  • szögletes zárójelben kell megadnunk a feltételeket
  • meg kell adnunk egy név érték párt, vagy szimplán egy tulajdonságot.

Ez önmagában is elég hasznos tud lenni, azonban pár helyettesítő karakter segítségével még többet hozhatunk ki a kijelöléseinkből!

Végződés kijelölő ($=)

A $= kifejezéssel olyan tulajdánságokat célozhatunk meg, amik a megadott kifejezéssel végződnek.

// Kijelöli az összes "_panel" id végződésű <div> elemet.
div[id$="_panel"] { ... }

Kezdődés kijelölő (^=)

A ^= kifejezéssel olyan tulajdánságokat célozhatunk meg, amik a megadott kifejezéssel kezdődnek.

// Kijelöli az összes "panel_" osztály kezdődésű <div> elemet.
div[class^="panel_"] { }

Tartalmazó kijelölő (*=)

A *= kifejezéssel azt ellenőrizhetjük, hogy egy adott tulajdonság tartalmazza-e a vizsgált kifejezést.

// Kijelöli az összes "panel" osztályt részletet tartalmazó <div> elemet.
div[class*="panel"] { }

 ::first-letter, :first-line

Az iniciálé használata főként a nyomtatott anyagokban elterjedt, azonban már weben is egyszerűen készíthetünk ilyen megjelenítést a ::first-letter pseudo elem segítségével!

A :first-line pseudo osztály a kiválasztott szövegünk első sorát jelöli ki.

See the Pen ::first-letter, :first-line Demo by Adam Laki (@adamlaki) on CodePen.

:empty

Az :empty pseudo osztály segítségével azt ellenőrizhetjük, hogy egy elem rendelkezik-e leszármazott elemmel vagy sem.

Használati eset lehet, egy olyan elem, ami dinamikusan kap szöveges értéket, és csak ettől függően kell megjelennie. Egy egyszerűbb használati esetben, csak a szövegét akarjuk módosítani, ilyenkor, ha kitöröljük a szöveget, akkor az elemet az :empty-vel eltüntethetjük.

See the Pen :empty Demo by Adam Laki (@adamlaki) on CodePen.

:lang

A :lang pseudo osztály segítségével olyan elemeket tudunk kijelölni – ahogy a neve elég jól utal rá -, amik egy specifikus nyelven jelennek meg. Ezzel a megoldással egyszerűen alkalmazhatunk nyelvfüggő megoldásokat olyan helyen, ahol a módosítandó szöveg eltérő nyelven íródott, mint a dokumentum törzse. Természetesen HTML oldalról a nyelvet meg kell jelölnünk a megfelelő lang tulajdonság értékkel.

See the Pen :lang() Demo by Adam Laki (@adamlaki) on CodePen.

:checked

A :checked pseudo osztályt a radio, checkbox és option elemeken használhatjuk. Az osztály akkor lesz érvényes, ha a felhasználó állapotot változtat az adott elemen, például ha rákattint (radio, checkbox), vagy kiválaszt (option-t a select mezőben) egy tételt.

Az egyik leghasznosabb technika, amit ez a pseudo osztály old meg, az az egyedi CSS megvalósítású radio vagy checkbox.

See the Pen Pure CSS Checkbox and Radio by Adam Laki (@adamlaki) on CodePen.

,