Egy kép többet ér ezer szónál, ezért kezdjük az ismerkedést egy példával. Igyekeztem egy olyan példafájlt szerkeszteni, ahol együtt tudom bemutatni mindazt, amiről ebben a posztban írni szeretnék. Elég nehéz volt minden lehetőségre olyan példát kitalálni, ami akár hasznos is lehet a való életben, de remélem, hogy ez a pszeudo-osztályok többségében sikerült. A példafájl első látásra valószínűleg kínai lesz, de az alábbi magyarázatokkal talán hasznosnak bizonyul.

:target Bizonyára ismeritek az egyes oldalakon belül elhelyezhető ún. “horgonyokat”, amelyek lehetővé teszik, hogy egy link ne egy adott oldalra, hanem az oldalon belül valahova mutasson. Ha egy ilyen linkre kattintunk, akkor az URL végén #valami látható, ahol a valami a horgony neve. Pl. a http://www.css-3.hu/wp-content/code-samples/css-pseudo-class.html#section1 jelenik meg a címsorban ha a példa fájl tartalomjegyzékének első hivatkozására kattintunk, ahol a link célpontjaként az első bekezdésre mutató horgony van beállítva. Az ilyen “célpontokhoz” lehet stílusokat rendelni a :target pszeudo-osztállyal. Ezt a lehetőséget a példában arra használtam fel, hogy a horgony célpontját képező h3 fejlécnek saját stílust adjak. Tehát ha a felhasználó a tartalomjegyzékről egy adott horgonyra ugrik, akkor a horgony mellett megjelenik egy piros csík, jelezve, hogy “ide ugrottál”. A szükséges kód a következő volt:

h3:target {
border-left: red thick solid;
padding-left: 20px;
}

:nth-child A CSS pszeudo-osztályokkal foglalkozó korábbi posztban foglalkoztam a :first-child pszeudo-osztállyal, ami lehetővé tette, hogy egy elemre akkor vonatkozzon a megadott stílus, ha ő a DOM struktúrában a szülő elemének az első gyermeke. Ezt a lehetőséget bővíti ki az :nth-child pszeudo-osztály, úgy hogy ne csak az első, hanem tetszőleges sorszámú elem vagy elemek legyenek kiválaszthatóak. A 3. elem kiválasztása például az :nth-child(3) megadásával történhet. De itt még nem ér véget az örömünk, ugyanis ennél lényegesen többet tud ez a pszeudo-osztály! A zárójelek között ugyanis nem csak egy konstanst adhatunk meg, hanem egy an+b alakú kifejezést, tehát előírhatjuk, hogy a stílus minden valahányadik elemre vonatkozzon. A példában ezt a táblázat páros sorainak alászínezésére használtam föl, a következő kóddal:

tbody tr:nth-child(2n+2) {
background-color: #C4EAEA;
}

Minden 2. sort akartam alászínezni, és mivel az n 0-ról indul (erre nincs befolyásunk), ezért kellett a +2.

:only-of-type Ez az érdekes pszeudo-osztály azokat az elemeket választja ki, akik egyedüliként léteznek adott típusúként a szülő elemükön belül. A példába tettem egy olyan sort, amiben csak egy kép van és egy olyat, amiben három. Az :only-of-type segítségével beállítottam, hogy abban az esetben, ha csak egy kép van az adott sorban, akkor az kapjon egy bordó keretet. Ehhez a következő kódot használtam.

img:only-of-type {
border: #990000 solid thick;
}

Persze lehet vitatkozni azon, hogy ennek mennyi haszna van, de el tudok képzelni olyan design-t, ahol más stílust akarunk adni egy elemnek ha egyedül áll, és mást, ha több egyforma is van belőle.

:not() Ez is egy érdekes pszeudo-osztály. Segítségével a stílus hatálya alól kizárhatunk egy adott osztálynak megfelelő elemet. A példában ezt arra használtam fel, hogy lent, a Hozzászólások részben minden olyan hozzászólás-fejlécet szürkével jelenítsek meg, amelyet nem az admin írt, azaz nem rendelkezik az admin_comment osztállyal. Ez a kizárás a következő kóddal valósult meg:

.comment_header:not(.admin_comment) {
color: gray;
}

Kompatibilitás tekintetében egész jól állunk a pszeudo-osztályokkal. Az Internet Explorer kivételével minden fontos böngésző támogatja őket. De még őt is rá lehet a legtöbb CSS 3 pszeudo-osztály támogatására egy javascript framework, például a jquery használatával. Az Operának a :target pszeudo-osztállyal gyűlik meg a baja egy kicsit, mert nem frissíti megfelelően a stílusokat a Back és a Forward gombok használatakor. Ezeket leszámítva minden működik, de itt is érvényes az, ami a CSS 3 megoldásokra általában: mivel a szabvány még nem végéleges, ne használjuk olyan dolgokra amelyek működése nélkülözhetetlen a weboldalunkon.

A CSS pszeudo-osztályai olyan nyelvi megoldások, amelyek segítségével külön stílusokat rendelhetünk az elemek egyes állapotaihoz. Legismertebb megnyilvánulása az, amikor egyes weboldalakon egy link fölé visszük az egérkurzort, és ennek hatására annak megváltozik a színe, vagy — ha addig nem volt aláhúzva — megjelenik az aláhúzás esetleg éppen fordítva. Persze ez csak a jéghegy csúcsa, íme az összes példa egy csokorba gyűjtve, alább pedig az egyes pszeudo-osztályok részletesen.

:link A linknek az az állapota, amelyet akkor vesz fel, amikor nincs fölötte a kurzor, és a link még nem lett meglátogatva. Az alábbi beállítással elérhetjük, hogy a linkünk ilyenkor sötétkék legyen.

a:link { color: #0000CC; }

:visited A linknek az az állapota, amelyet akkor vesz fel, amikor a linket már meglátogattuk. Az alábbi beállítással elérhetjük, hogy a linkünk ilyenkor lila legyen.

a:visited { color: #990066; }

:hover Az elem akkor kerül ebbe az állapotba, ha az egérkurzor fölötte áll. Nem csak linkre használható, szinte tetszőleges elemre vonatkozhat. A következő beállítással világoskékre változtathatjuk az egérkurzor alatti bekezdés színét.

p:hover { color: #0099FF; }

:active Az elemnek az az állapota, amikor rákattintottunk, de még nem engedtük fel az egeret. Az alábbi beállítással elérhetjük, hogy bekezdésünk ilyenkor piros legyen.

p:active{ color: #FF0000; }

:focus Az elemnek a fókuszált állapota, amikor az adott elem kapja a billentyűzetről érkező információt. Tipikus példa az input szövegmező, amely a következő beállítással világosszürke alapszínt kap fókuszált állapotban. Ez például egy hosszabb űrlapon segít követni, hogy épp melyik mezőnél tartunk.

input:focus { background-color: #CCCCCC; }

:first-child Ezzel olyan elemeket választhatunk ki, amelyek a szülő elemük első gyermekei. Ha például van egy <div>-ünk, és abban <p> bekezdéseink, akkor a p:first-child alatt megadott beállítások csak az első bekezdésre vonatkoznak majd. Az alábbi beállítás például narancssárgára színezi az első bekezdést.

p:first-child { color: #FF6600; }

:lang(xx) Ezzel a pszeudo-osztállyal nyelv-specifikus beállításokat adhatunk meg. (Az egyes nyelvek kódjai itt érhetők el.) A nyelvet nekünk kell megadnunk a html fájlban (pl. a <p lang="la"> latin nyelvű bekezdést jelöl), a CSS-ben pedig azt adhatjuk meg, hogy a html-ben adott nyelvi szövegként megjelölt rész milyen stílusbeállításokat kapjon. A következő beállítás például kékre színezi a latin nyelvű bekezdéseket.

p:lang("la") { color: #0000FF; }

Végezetül néhány szó a kompatibilitásról. Az Internet Explorer-en kívül más népszerű böngészővel nem lesz gondunk, így a következők csak az IE támogatásról szólnak:

• :link, :visited — IE6
• :hover — IE6 csak linkekre, IE7-től egyéb elemekre is
• :active — IE6, IE7 csak linkekre, IE8 egyéb elemekre is
• :first-child — IE7
• :focus, :lang — IE8

Részletesebb információk a támogatásról itt találhatók.