A CSS szelektorok
Ahhoz, hogy az oldal egyes elemeit megformázhassuk, először meg kell határoznunk, hogy egy-egy formázást melyik HTML elemekre szeretnénk alkalmazni. Erre a célra a CSS szelektorokat használ. A szelektorok célja, hogy pontosan meghatározzák, hogy melyik elemre kell vonatkoznia egy adott formázásnak. Ez tehát azt jelenti, hogy egy-egy szelektor minden esetben egyértelmű, azaz minden elemről pontosan meg tudjuk mondani, hogy igaz-e rá egy szelektor, vagy sem.
A CSS jelenlegi verzióiban már nagyon sok féle szelektorral találkozhatunk, de első körben kezdjük az alapokkal. Ha szeretnénk egy-egy elemet megcélozni, a legegyszerűbb, ha ehhez az elem típusát, azonosítóját, vagy osztályát használjuk.
Ha az elem típusa alapján szeretnénk megcélozni egy elemet, nincs más dolgunk, mint kiírnunk az elem nevét, például: li vagy td.
Ha az elem azonosítója alapján szeretnénk megcélozni egy elemet, az azonosítót egy kettőskereszt után adhatjuk meg, például így: #fejlec vagy #kilepesGomb.
Ha az elem osztálya alapján szeretnénk megcélozni egy elemet, az osztály egy pont után adhatjuk meg, például így: .hozzaszolas vagy .kartya.
Ezek a célzási megoldások természetesen kombinálhatók is egymással, ehhez nincs más dolgunk, mint közvetlenül, szóköz nélkül egymás mögé írnunk őket. Előfordulhat például, hogy több helyen is alkalmaztuk a piros nevű osztályt, időnként teljes bekezdésekre, időnként pedig csak bekezdésen belüli span elemekre, és ezek formázását egy kicsit eltérően szeretnénk megoldani. Ez esetben nincs más dolgunk, mint az elem típusa után megadni az osztályra vonatkozó szelektort, például így: span.piros vagy p.piros, ezek közül az előbbi csak a piros osztályban lévő span típusú elemekre, utóbbi pedig a piros osztályú p típusú elemekre vonatkozik.
Szelektorok kombinálása
A szelektorokat természetesen bizonyos mértékig kombinálni is tudjuk - erre a jelenlegi CSS szabvány 4 különféle operátort ismer.
A legegyszerűbb eset, hogy egy adott elemen belül található bizonyos elemeket szeretnénk megcélozni. Például az oldalunk rendelkezik egy nav elemből kialakított navigációs sávval, és ennek a hivatkozásait szeretnénk megcímezni, vagy esetleg van egy bejegyzésünk egy article elemben, és az összes ezen belüli kiemelést, azaz mark elemet keressük. Ez esetben a szóköz operátort használhatjuk, azaz nincs más dolgunk, mint a szülő elem, és a benne kijelölendő elemek nevét egymás után, egy szóközzel elválaszva megadni, pl.: nav a illetve article mark.
Előfordulhat azonban olyan is, hogy csak egy elem bizonyos típusú közvetlen gyermekeit szeretnénk formázni. Például keresem az összes hivatkozást, ami egy article elemen belül van, de csakis azokat szeretném megformázni, amik más tagben (bekezdés, lista, stb.) nincsenek benne, csak közvetlen az article gyerekei. Erre a célra a > operátort, azaz a közvetlen gyermek operátort használhatjuk, jelen példánkat tehát így tudjuk lekódolni: article>a.
Az előbb megismert két operátor egymásba ágyazott elemekkel foglalkozott. A következő két CSS operátorunk tulajdonképpen ugyanezeknek az azonos szinten lévő elemekre vonatkozó változatai. Ez tehát azt jelenti, hogy olyan elemeket tudunk szűrni, amik azonos szülőelemen belül, egymás után találhatóak. Erre is két lehetőségünk van: az első a ~ operátor, amely egy adott elem utáni összes adott elem megcélzását teszi lehetővé, ha tehát keressük például a #alcim után található összes bekezdést, ezt megtehetjük a #alcim~p szelektor használatával. Ha pedig csak a közvetlen egymás mögötti elemeket szeretnénk figyelembe venni, használhatjuk a + operátort, így megkereshetjük például az összes kettes szintű címsort közvetlen követő bekezdést a h2+p szelektor segítségével.
Ezeket a kombinációs módokat természetesen nyugodtan használhatjuk osztályokkal, vagy azonosítókkal kombinálva is, például: nav a.sarga, vagy article span.zold, vagy akár #doboz>.vastag.
Egy formázás alkalmazása több szelektorra
Amennyiben több szelektorra is szeretnénk alkalmazni egy formázást, ezeket felsorolhatjuk vesszővel elválasztva, például így: .piros, .red vagy header img, footer img.
A CSS ennél bonyolultabb szelektorok összeszerelésére is lehetőséget biztosít. Szűrhetünk például elemek paramétereire, állapotára is - ezekről azonban majd későbbi cikkeinkben tanulunk.