css-3Blog

A következő cikkben a CSS 3-ban bevezetett új pszeudo-osztályokkal foglalkozunk majd, de hogy mindaz amit majd ott írok ne lógjon a levegőben, térjünk vissza egy kicsit a CSS 2-höz, és ismerjük meg az abban bevezetett pszeudo-osztályokat.

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.