CSS álosztályok és álelemek
Bizonyos kijelöléseket nem tudunk végrehajtani csak a dokumentumfára támaszkodva. Ilyen eset például, amikor minden bekezdés első betűjét, vagy első sorát kívánjuk formázni. Ilyen esetekben tudjuk használni az álosztályokat, vagy az álelemeket.
| Álosztály neve | Leírás | IE6 támogatja? | IE7 támogatja? |
|---|---|---|---|
:first-child |
Azt az elemet választja ki, amelyik legelső gyermeke egy másik elemnek | NEM | IGEN |
:link |
A még meg nem látogatott linkeket választja ki | IGEN | IGEN |
:visited |
A már meglátogatott linkeket választja ki | IGEN | IGEN |
:hover |
Azt az elemet választja ki, amelyik felett éppen áll az egér | IGEN, de csak linkekre | IGEN, minden elemre |
:active |
Azt az elemet választja ki, amelyiken állva az egérrel a felhasználó lenyomta az egérgombot, de még nem engedte fel | IGEN | IGEN |
:focus |
Azt az elemet választja ki, amelyiknél a fókusz van, azaz fogadja a billenytűzetről bevitt adatot | NEM | NEM |
:lang(nyelvkód) |
Megadott nyelvű dokumentumrészt választ ki | NEM | NEM |
A :first-child azt az elemet választja ki, amelyik legelső gyermeke egy másik elemnek. Például tegyük fel, hogy van egy div elemünk, amiben három bekezdés van. Ekkor a div p:first-child kijelölő a div elembeli legelső bekezdésre fog vontakozni, de a másik két bekezdésre nem.
A :first-child álosztály használata.
A :link, :visited, :hover, :active álosztályokról a linkekről írodott fejezetben volt szó.
Bár az Internet Explorer 6 csak a linkekre értelmezi a :hover álosztályt, más elemekre is tudjuk alkalmazni.
Animáció a :hover segítségével (vigyük az egeret a méhre).
Táblázat sorának kiemelése, ha az egér felette van.
A :focus álosztály formok díszítésénél hasznos.
A :focus álosztály használata.
A :lang álosztályt nem érdemes használi a gyenge támogatottsága miatt.
| Álelem neve | Leírás | IE6 támogatja? | IE7 támogatja? |
|---|---|---|---|
:first-line |
Egy bekezdés első sorát választja ki | IGEN | IGEN |
:first-letter |
Egy bekezdés első betűjét választja ki | IGEN | IGEN |
:before |
Megadott tartalmat illeszt be egy elem elé | NEM | NEM |
:after |
Megadott tartalmat illeszt be egy elem mögé | NEM | NEM |
A :first-line álelem csak blokk-szintű elemekre alkalmazható, és csak az alábbi tulajdonságokat tudjuk rá alkalmazni: font tulajdonságok, color tulajdonságok, background tulajdonságok, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow, clear.
Bekezdés első sorának díszítése.
A :first-letter álelem is csak blokk-szintű elemekre alkalmazható, és csak az alábbi tulajdonságokat tudjuk rá alkalmazni: font tulajdonságok, color tulajdonságok, background tulajdonságok, text-decoration, vertical-align (csak ha a float értéke none), text-transform, line-height, margin tulajdonságok, padding tulajdonságok, border tulajdonságok, float, text-shadow, clear.
Bekezdés első betűjének díszítése (iniciálé).
Bekezdés első betűjének és sorának díszítése egyszerre.
A :before álelem bizonyos tartalmat illeszt az elem elé, az :after pedig az elem mögé. Hogy pontosan milyen tartalmat, azt a content tulajdonsággal tudjuk megadni. Itt megadhatunk szöveget, vagy képet. Ha szöveget adunk meg, akkor erre további stílusokat is alkalmazhatunk.
Szöveg illesztése stíluslappal egy elem elé és mögé, majd a beillesztett szöveg díszítése.
Kép illesztése stíluslappal egy elem mögé.
Végül pedig lássunk egy példát arra, hogyan lehet kombinálni az eddig megismert álosztályokat és álelemeket!
Álosztályok és álelemek kombinálása.
Ajánlott linkek
CSS specifikáció az álosztályokról és álelemekről: http://www.w3.org/TR/CSS21/selector.html#pseudo-elements
CSS specifikáció a generált tartalomról: http://www.w3.org/TR/CSS21/generate.html