CSS 3 pszeudo-osztályok

Miután megismerkedtünk a CSS 1 és 2-ben bevezetett pszeudo-osztályokkal, ideje megnézni, hogy mi újat hoz ezen a területen a CSS 3. Aki azt várja, hogy rengeteg új lehetőséget kapunk ezen a területen, nem fog csalódni. Az új pszeudo-osztályoknak hála rugalmasan rendelhetünk különböző stílusokat tartalmainkhoz, a nélkül, hogy osztályok sorozatával kellene teletűzdelnünk html fájlunkat.
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:

1	h3:target {

2	border-left: red thick solid;

3	padding-left: 20px;

4

}

: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:

1	tbody tr:nth-child(2n+2) {

2	background-color: #C4EAEA;

3

}

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.

1	img:only-of-type {

2	border: #990000 solid thick;

3

}

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:

1	.comment_header:not(.admin_comment) {

2	color: gray;

3

}

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.