Programozott tananyag:
Általános kijelölő ( * )
A weboldalon található valamennyi HTML elemre vonatkozik.
Azonosító kijelölők ( ID selector )
Minden weboldalon csupán egyetlen HTML elemre vonatkozik, amelynek egyedi azonosítójával megegyezik.
Osztály kijelölők ( Class selector )
Minden olyan HTML elemre vonatkozik, amelynek osztály jellemzőjének értéke megegyezik a szektor nevével.
A típuskijelölők ( type selector )
A weboldal összes azonos típusú elemére vonatkozik.
Csoportos kijelölés ( group of selectors )
A weboldal összes, a felsorolásban szerelőkkel megegyező típusú elemére vonatkozik. A kijelölendő HTML elemek neveinek felsorolásával adhatjuk meg.
Egyszerű jellemzőkijelölő
Az összes olyan Elem típusú elemre vonatkozik, amelynél megadásra került az adott jellemző.
Pontosjellemzőérték-kijelölő
Az összes olyan Elem típusú elemre vonatkozik, amelynél adott jellemző értéke azonos a kijelölőben megadott értékkel.
Részleges jellemzőérték-kijelölő
Az összes olyan Elem típusú elemre vonatkozik, amelynél adott jellemző szóközökkel elválasztva megadott értékei között szerepel a kijelölőben megadott érték.
Jellemzőérték-vége kijelölő
Az összes olyan Elem típusú elemre vonatkozik, amelynél adott jellemző végén szerepel a kijelölőben megadott érték.
Jellemzőérték-eleje kijelölő
Az összes olyan Elem típusú elemre vonatkozik, amelynél adott jellemző elején szerepel a kijelölőben megadott érték.
Jellemzőérték-részlete kijelölő
Az összes olyan Elem típusú elemre vonatkozik, amelynél az adott jellemzőben bárhol szerepel a kijelölőben megadott érték. Nincs szükség teljes egyezésre.
Nyelvi jellemzőkijelölő
Az összes olyan Elem típusú elemre vonatkozik, melynek nyelve megegyezik a kijelölőben megadott nyelvvel.
Dokumentumfa
Az adott elem tulajdonságainak meghatározásánál a webfejlesztőnek is ismerni kell az elemek dokumentumfán elfoglalt helyzetét.
A HTML gyökérelem
Minden HTML5 dokumentum gyökér eleme, egyben az összes többi elem őse a html elem.
Gyermek kijelölő
Ha a dokumentumfán egymás alatt helyezkedik el két elem, akkor a hierarchiában feljebb lévő a szülő eleme a alatta elhelyezkedőnek.
Leszármazott kijelölő
Egy HTML5 dokumentumban minden elem a html elem leszármazottja, mivel minden elem a <html ..>..</html> címkék között helyezkedik el.
Testvér kijelölő
A Elem1 HTML elemet elsőként követő Elem2 HTML elemre vonatkozik, amely Elem1-el közös szülőtől származik.
Általános testvér kijelölő
A Elem1 HTML elemet követő valamennyi (nem csak az első) Elem2 HTML elemre vonatkozik, amely Elem1-el közös szülőtől származik.
Első elem kijelölő
Álosztály, amely kiválasztja azokat az elemeket, amelyek szülő elemeik első gyermekei.
Utolsó gyermek kijelölő
Kiválasztja azokat az elemeket, amelyek szülő elemeik utolsó gyermekei.
Első gyermek típuskijelölő
Kiválasztja azokat az elemeket, amelyek szülő elemeik első, adott típusú gyermekei.
Utolsó gyermek típuskijelölő
Kiválasztja azokat az elemeket, amelyek szülő elemeik utolsó, adott típusú gyermekei.
N-edik gyermek kijelölő
Álelem kijelölő, amely kiválasztja az adott szülőelem n-edik gyermekelemét. Az n lehet szám, kulcsszó vagy képlet.
N-edik gyermek típuskijelölő
Álelem kijelölő, amely kiválasztja az adott szülőelem n-edik megadott típusú gyermekelemét, az első adott típusú elemtől kezdve a számlálást.
Hátulról N-edik gyermek típuskijelölő
Álelem kijelölő, amely kiválasztja az adott szülőelem n-edik, megadott típusú gyermekelemét, az utolsó elemtől kezdve a számlálást.
Hátulról N-edik kijelölő
Álelem kijelölő, amely kiválasztja az adott szülőelem n-edik gyermekelemét, az utolsó elemtől kezdve a számlálást.
Első sor kijelölő
Álelem kijelölő, amely kiválasztja bekezdések első sorait.
Első betű kijelölő
Álelem kijelölő, amely kiválasztja a bekezdések első betűit.
Link kijelölők
Álosztályok: Kijelölik azokat a linkeket, amelyek olyan weboldalra mutatnak, amiket felkeresett vagy még nem keresett fel a látogató, a böngésző adatai szerint.
Dinamikus álosztály kijelölők
Dinamikus álosztály kijelölők különböző események bekövetkezésekor válnak aktívvá.
Beszúrt tartalom
A :before álelem kijelölő segítségével a kijelölt HTML elem elé és az :after álelem kijelölő segítségével pedig mögé szúrhatunk be a HTML kódban nem szereplő tartalmakat.
Számlálók használata
A :before és az :after álelem kijelölők felhasználásának lehetőségeit kiterjeszti a számlálók használata.
Többszintű számozás
A címsorok vagy felsorolások minden szintjéhez egy-egy számlálót rendelve több szintű számozással jeleníthetjük meg azokat, a nyomtatott könyvek tartalomjegyzékében és fejezetcímeinél megszokott módon.
Célpont kijelölő
Hasznos lehet ha a képernyő egy adott területén a felhasználó választásától függően más-más tartalmat kívánunk megmutatni.
Engedélyezett-tiltott kijelölők.
Az :enabled álosztály szelektor segítségével kijelölhetünk bármilyen engedélyezett HTML elemet (amelyek rendelkezik enabled és disabled állapotokkal), de elsősorban űrlapelemek kijelölésére szolgál.
Kijelölt elem kijelölése
Nagyon hasznos! A felhasználó által kijelölt tartalom helyezhető segítségével a képernyőre.
Kijelölt tartalom kijelölő
A honlap felhasználó által kijelölt területe böngészőnként másként jelenik meg. Az űrlapelemek címkéi esetén kimondottan zavaró lehet lehet a háttér színének változása.
Nem kijelölő
Segítségével kijelölhetjük azokat a HTML elemeket, amelyek valamely tulajdonsággal nem rendelkeznek.
Üres elem kijelölő
Az üres elemek kiválasztására szolgál. Ha egy elem nyitó és záró címkéje között akár egy szóköz is áll, akkor az már nem lesz kiválasztva.
Gyökér elem kijelölő
A gyökér elem kiválasztására szolgál. A HTML5 dokumentumok gyökéreleme a html.
Egyke gyermek típuskijelölő
Kiválasztja azokat az elemeket, amelyek szülő egyetlen, adott típusú gyermekei.
Nyelvkód kijelölő
A :lang() kiválasztó segítségével, a nyelv jellemző értéke alapján választhatjuk ki a HTML elemeket.
Egyke gyermek kijelölő
Kiválasztja azokat az elemeket, amelyek a szülő elemek egyetlen gyermekei.
CSS szelektorok
a tananyagban
| .class | CSS1 |
| #id | CSS1 |
| * | CSS2 |
| elem | CSS1 |
| elem,elem | CSS1 |
| elem elem | CSS1 |
| elem>elem | CSS2 |
| elem+elem | CSS2 |
| elem1~elem2 | CSS3 |
| [jellemző] | CSS2 |
| [jellemző=érték] | CSS2 |
| [jellemző~=érték] | CSS2 |
| [jellemző|=érték] | CSS2 |
| [jellemző^=érték] | CSS3 |
| [jellemző$=érték] | CSS3 |
| [jellemző*=érték] | CSS3 |
| :link | CSS1 |
| :visited | CSS1 |
| :active | CSS1 |
| :hover | CSS1 |
| :focus | CSS2 |
| :target | CSS3 |
| :enabled | CSS3 |
| :disabled | CSS3 |
| :checked | CSS3 |
| :before | CSS2 |
| :after | CSS2 |
| :lang(language) | CSS2 |
| :first-letter | CSS1 |
| :first-line | CSS1 |
| :first-child | CSS2 |
| :last-child | CSS3 |
| :first-of-type | CSS3 |
| :last-of-type | CSS3 |
| :only-of-type | CSS3 |
| :only-child | CSS3 |
| :nth-child(n) | CSS3 |
| :nth-last-child(n) | CSS3 |
| :nth-of-type(n) | CSS3 |
| :nth-last-of-type(n) | CSS3 |
| :root | CSS3 |
| :empty | CSS3 |
| :not(kiválasztó) | CSS3 |
| ::selection | CSS3 |