Szelektorok

A tulajdonságok definiálásakor meg kell adni, hogy az adott tulajdonság a dokumentum mely objektumaira vonatkozzon. Ezt a megadást végzik el a szelektorok. Fajtái a következők:

A szelektorok általános alakja

Egy egyszerű szelektor lehet egy típus szelektor, amely egy meghatározott elemet jelöl ki, vagy lehet egy általános szelektor, amely minden elemet kijelöl; és követheti ezt egy vagy több paramétert kiválasztó szelektor, azonosítót megnevező szelektor, vagy valamelyik osztályfajtát meghatározó szelektor.

Az egyszerű szelektorok összevonhatók különböző kombinálójelekkel, mint a szóköz, a > és a + jelek.

Ezenkívül több szelektor egymás után felsorolható egy szabály elején, egyszerre több szelektorhoz is hozzákapcsolva az adott szabályban megadott tulajdonságokat is.

Általános szelektor

Az általános szelektor minden elemre érvényes. Alakja a * jelből áll. A HTML dokumentumban előforduló valamennyi elemre érvényesek a megadott szabályok.

Általában olyankor használatos, ha valamely osztályba tartozó valamennyi elemre érvényes tulajdonságokat kell megadni. Ilyenkor (tehát ha egyéb szelektorrészek is követik) elhagyható a *:

Típus szelektor

A típus szelektor egy adott elemtípust határoz meg. Azaz a megadott névvel megegyező, a dokumentumban szereplő valamennyi elemet jelenti. Például a H1 elemet jelöli (és a betűtípusát állítja be) a következő szabály elején levő szelektor:

H1 { font-family: sans-serif}

Leszármazott

Amennyiben egy adott elem azon előfordulásait akarjuk külön szabállyal elérni, amelyek egy megadott másik elemen belül, annak tartalmában fordulnak elő, akkor használható a leszármazott szelektor.

A szelektorokon belül általában tilos a szóközök szerepeltetése, mivel ahol előfordul, annak fontos jelentése van.

A leszármazotti lánc több elemű is lehet. Minden esetben az elemek közé szóközt kell tenni (legalább egyet). Balról jobbra haladva az elemek egymás leszármazottaiként értelmezendők: A B esetén a B elem az A elem leszármazottja. Például lássuk a következő szabályokat:

H1 { color: red}
EM { color: red}

Ennek hatására mindkét elem vörös betűkkel jelenik meg. Ha azt akarjuk, hogy az EM elem a H1 elemen belül más színű legyen, azt ezek után így adhatjuk meg:

H1 { color: red}
EM { color: red}
H1 EM { color: blue}

Elképzelhető az is, hogy olyan szabályt akarunk alkotni, amely azokra a P elemekre vonatkozik, amelyek közvetett leszármazottai egy DIV elemnek, vagyis a DIV elem által tartalmazott valamilyen elem leszármazottai, tehát van legalább egy elem még közöttük (de lehet több is). Ez a következő szelektorral adható meg: DIV * P.

Gyerek: közvetlen leszármazott

Amennyiben olyan elemre akarunk hivatkozni, amely egy meghatározott elemnek a tartalma úgy, hogy közben más elem már nem szerepel a leszármazási sorban, akkor az ilyen elemet gyereknek is nevezzük, és a következőképpen adhatjuk meg: Az ős elem után írjuk a > jelet, majd a gyerek elemet.

Például a BODY elem által közvetlenül tartalmazott P elemre vonatkozó szabály:

BODY > P { line-height: 1.3}

Következő összetettebb példa a közvetlen leszármazott és az általános leszármazott kombinálását mutatja:

DIV OL>LI P

Jelentése: minden olyan P elem, amely egy DIV elemben valamilyen mélységben található OL elem LI gyermekében található.

Első gyermek

A gyermekek közül az első külön is kiválasztható egy speciális osztály szelektorral. Ennek a neve :first-child. Például egy DIV elemen belül az első P elem behúzását eltüntetni a következő szabállyal lehet:

DIV > P:first-child { text-indent: 0}

Közvetlenül következő elem

Egy elemet közvetlenül követő elemre is lehet szabályokat alkotni. Például a címek után a bekezdések másként viselkedhetnek, mint a többi bekezdés. Az ilyen kapcsolatot a + jel alkalmazásával lehet leírni: E1+E2 jelentése, hogy azokra az E2 elemekre vonatkozik a szabály, amelyek közvetlenül egy E1 elem után következnek. A két elemnek ugyannak az elemnek a gyerekeinek kell lenniük.

Az előbbi példánál maradva, ha egy 1-3. rangú cím után a bekezdés első sorának behúzását el akarjuk tüntetni, míg a többi sornál 1 em méretű behúzást akarunk csinálni azt a következőképpen lehet megcsinálni:

P { text-indent: 1em}
H1 + P { text-indent: 0}
H2 + P { text-indent: 0}
H3 + P { text-indent: 0}

vagy ugyanez rövidebben:

P { text-indent: 1em}
H1 + P, H2 + P, H3 + P { text-indent: 0}

Paramétert kiválasztó szelektorok

Megadható olyan szelektor is, amely egy adott paraméter megadásánál válik érvényessé. A paraméter nevét szögletes zárójelek közé kell írni. Ezenfelül az adott paraméter értékére is lehet megkötést adni a következők szerint:

Több paraméter szelektor is használható együtt, mint az alábbi példában. Ekkor mindegyik szelektor által előírt feltételnek egyszerre kell teljesülnie.

SPAN[hello="Cleveland"][goodbye="Colombus"] { color: blue;}

Nyelv kiválasztása

Ha nyelvenként eltérő tulajdonságokat akarunk alkalmazni, akkor a fenti módszert lehet alkalmazni. Például ha meg akarjuk akadályozni a francia nyelvű szöveg megjelenését, akkor a következő szabályt alkalmazhatjuk:

*[LANG=fr] { display: none}

Az angol nyelv esetén azonban ez már nem feltétlenül fog működni a sok különböző nyelvjárás miatt. Ezekre ugyanis mind külön azonosító van: en-US, en-cockney stb. Hogy erre mindre vonatkozzon a szabály, a következő megdoldást lehet alkalmazni:

*[LANG|="en"] { color: blue}

Osztály megnevezése

A szelektorok között talán az egyik leghasznosabb lehetőség az osztály megadása. A HTML elemek class paraméterével beállított osztályhoz tartozó szabályok adhatók meg vele. Erre tulajdonképpen alkalmas lenne a paraméterértéket megadó szelektor is, de fontossága miatt külön, rövidebb megadási módja is van: egy . után az osztály neve. Például a DIV elem, amely a value osztályba van sorolva (nyitótagja: <DIV class="value">) a következő szelektorral adható meg: DIV.value.

Természetesen használható az általános szelektorral is, ha bármely elemre akarjuk vonatkoztatni, amely egy adott osztályba van sorolva. Ekkor a pont előtt a csillag elhagyható.

Arra is lehetőség van, hogy egy adott elem több osztályba is besorolásra kerüljön. Ilyenkor lehetőség van olyan szabály megadására is, amely csak akkor alkalmazandó, ha több osztályba egyszerre tartozik egy elem. Ebben az esetben minden osztályt külön . után fel kell sorolni. A felsorolási sorrend mindegy. Például a következő szabály azokra a P elemekre vonatkozik, amelyek egyszerre vannak a pastoral és a marine osztályba is (és még esetleg egyéb osztályokba is) besorolva:

P.pastoral.marine { color: green }

Mint látható, sem a pont előtt, sem utána nincs szóköz! A fenti szabály érvényes lesz akkor is, ha az osztályba sorolás a következő: class="pastoral blue aqua marine", de nem kerül alkalmazásra abban az esetben, ha a következő: class="pastoral blue".

Azonosító megnevezése

Az osztályhoz hasonlóan, lehetséges egy konkrét, egyedi azonosítóval ellátott elemre vonatkozó szabály alkotása is, ha a szelektorban ezt az azonosítót szerepeltetjük. Ezúttal a pont helyett a # jel használatos. A chapter1 azonosítóval ellátott H1 elemre például a következő szelektorral lehet hivatkozni: H1#chapter1.

Az azonosító a HTML elemek id paramétere értékeként adható meg, és az egész dokumentumon belül egyedinek kell lennie.

Pseudo-elemek és -osztályok

Egy dokumentumnak lehetnek olyan külön formázást igénylő részei, amelyekhez nem tartozik önálló elem. Ilyen például egy bekezdés első sora. Ennek tipográfiáját nem lehet a fenti szelektorok egyikével sem definiálni. Az ilyen esetekre a CSS bevezeti a pseudo-elem illetve a pseudo-osztály fogalmát.

A következő pseudo-osztályok léteznek:

A következő pseudo-elemek léteznek: