Szelektorok vagy másnéven kiválasztók

Azonosító alapú kiválasztás

A HTML elemeknek megadhatjuk az egyedi id tulajdonságot. Így az egyedi id-vel rendelkező elemhez speciális formázást határozhatunk meg. CSS-ben a # segítségével tudunk elemet id alapján kiválasztani.

A következő példában a menu azonosítójú elem betűszínét zöldre állítjuk:

#menu {color: green}

A para1 azonosítójú bekezdést középre igazítva és piros színnel definiáljuk:

p#para1 {
  text-align: center;
  color: red
}

Univerzális kiválasztó

A * szelektorral minden elemet egységesen tudunk formázni:

* { border: 1px solid #000000; }

Tulajdonság kiválasztó

A következő példa csak azokra a képekre fog vonatkozni, amelyek alt tulajdonsága meg van adva:

img[alt] { border: 1px solid #000000; }

A következő példa még a tulajdonság értékét is figyelembe veszi:

img[src="alert.gif"] { border: 1px solid #000000; }

Gyermek kiválasztó

Gyakori, hogy az elemek túlzott id és class tulajdonsággal való ellátása helyett inkább az elemek hierarchiájára (más megfogalmazásban leszármazására, mint a családfánál) építünk.

Pl. a következő példa csak a h3 elemen belül közvetlenül elhelyezkedő strong tagra lesz érvényes. Tehát nem vonatkozik a h3 elem más részeire, és nem vonatkozik a nem közvetlenül h3-ban levő strong elemekre sem.

h3 > strong { color: blue; }

Leszármazott kiválasztó

Az előzőhöz igen hasonló lehetőség nem csak a közvetlen szülő-gyermek kapcsolatra, hanem az akár több szintű öröklődésre, vagy máshogy fogalmazva a tartalmazásra épít. Nézzünk egy példát:

<div>
  <em>Szia!</em>
  <p>Ez a bekezdés
    <em>köszönt</em> téged.
  </p>
</div>

Ekkor a div > em kiválasztó csak az első, míg a div em kiválasztó mindkét em tagot formázza.

Testvér kiválasztó

Gyakran van szükség arra, hogy egymást közvetlen követő elemek (vagyis testvérek) irányából fogalmazzuk meg a kiválasztásunkat. Pl. egy h2-es címet követő bekezdések közül az elsőt máshogy szeretnénk formázni, mint a továbbiakat. Ekkor jó megoldás lehet a h2 + p kiválasztó, amely a h2 utáni p tagot címzi meg.

Megjegyzés

A CSS fájlba azért szoktunk megjegyzéseket tenni, hogy a későbbi megértést és módosítást könnyebbé tegye. CSS megjegyzésként egyedül a C nyelvből ismert /*...*/ megjegyzés használható:

/* Ez itt egy megjegyzés */
p {
  text-align: center;
/* Ez itt egy másik megjegyzés */
  color: black;
  font-family: arial
}

A gyakorlatban szoktuk még arra is használni a megjegyzéseket, hogy egyes formázásokat ideiglenesen kikapcsoljunk vele.