Weblabor

A cikksorozat harmadik részében folytatjuk a CSS bemutatását, további kiválasztókat fogunk áttekinteni. Fontosnak tartom továbbra is kihangsúlyozni, hogy a szabványt nézzük végig, és nagyon könnyen előfordulhat, hogy nem minden böngésző tudja kezelni az ismertetett megoldásokat. Ez különös tekintettel igaz az ebben a cikkben bemutatandókra. A teljes böngésző támogatás hiánya azonban továbbra sem akadályozza meg olvasóinkat abban, hogy az ilyen kiválasztókat használó megoldásokat vezessenek be extraként oldalaikon. Csak az a fontos, hogy ne ezen múljon az oldal használhatósága.

További kiválasztók

A korábbiakban megismerkedtünk az elem, osztály, azonosító és tulajdonság alapú, továbbá a helyzetérzékeny és szülő-gyermek kapcsolatú kiválasztókkal. Ezek azok a kiválasztók, melyek kézzelfogható blokkokat jelölnek ki: egy-egy elemet annak paraméterként rögzített tulajdonságaitól függően. Ezeken túl azonban léteznek az úgynevezett látszólagos (virtuális) kiválasztók is, melyek vagy az adott elem egy részére illenek (látszólagos elemek), vagy az adott elem állapotától teszik függővé a kiválasztást (látszólagos osztályok). Ebben a részben ezeket fogjuk áttekinteni.

Linkekkel kapcsolatos látszólagos kiválasztók

Aki már egy kicsit is foglalkozott HTML-lel, készített, vagy egyszerűen csak látogatott már weboldalakat, biztosan tudja, hogy a linkek más-más színnel jelennek meg, ha már voltunk az általuk mutatott oldalon, illetve ha még nem. Ezekre a színekre a HTML-ből, a body elem tulajdonságainak (link, vlink) állításával is hatással lehetünk, azonban CSS-t használva, sokkal több lehetőségünk lesz. Látszólagos kiválasztókkal ugyanis külön-külön meghatározhatjuk a megjelenésüket! Ezeket a kiválasztókat a következőképpen használhatjuk:Az első sor semmi különöset nem tartalmaz, egy link elemnek határozzuk meg a stílusát. A második sorban azokat a linkeket választjuk ki, melyeket még nem látogattunk meg, a harmadik sorban pedig azokat, melyeket már meglátogattunk (nemrég). A két tulajdonság értelemszerűen kizárja egymást.

Dinamikus látszólagos kiválasztók

A HTML dokumentumokat az ember nem szokta egy ültő helyében elolvasni, majd otthagyni. Az egész lényege valahol a dinamizmus: linkekre kattingatunk, adott esetben form elemeket használunk, stb. Az internet már interaktív média, és erre a CSS-t is felkészítették. No, nem kell bonyolult dolgokra gondolni, az eszköztárunk a következő lehetőségeket tartalmazza: az egérkurzor az adott elem felett van, az adott elem éppen aktív, továbbá ha az adott elem éppen fókuszban van.Az első sorban itt sem tettünk semmi különöset, a beviteli mezők tulajdonságait határoztuk meg. A második sorban levő :hover kiválasztó akkor fog működni, ha az adott mező felé visszük az egérkurzort, ekkor kék színnel jelenik meg a kerete. A harmadik sorban azt határozzuk meg, miként jelenjenek meg az aktív elemek. Hogy mit értünk aktív elemen? Azt, amelyikkel éppen csinálunk valamit. Például "megragadjuk", azaz lenyomva tartjuk az egérkurzort, vagy éppen lenyomunk egy gombot, stb. Példánkban ilyenkor az elem betűi vastaggá válnak. Végül a negyedik sorban azt definiáljuk, mi történjen, mikor éppen ki van választva az elemünk, rajta van a fókusz, ebben az esetben éppen a kurzor villog az input mezőnkben. Ehhez a :focus kiválasztóhoz rendelt tulajdonságunkkal éppen azt határoztuk meg, hogy a háttérszíne legyen világosszürke. Fontos megjegyezni, hogy bár a példában éppen beviteli mezőt láttunk, de ez a tulajdonság például a linkekre ugyanúgy működik, mint a közönséges bekezdésekre, vagy más elemre!

Elemszerű látszólagos kiválasztók

A CSS lehetőséget biztosít kiválasztanunk egy-egy elem tartalmának csak bizonyos részeit, mintha azok külön-külön definiált elemek lennének. Ezekkel a látszólagos kiválasztókkal az adott elem első karakterét, vagy akár az első sorát is kiválaszthatjuk.Így az adott betű, vagy az adott sor teljesen úgy fog viselkedni, mintha osztály alapú kiválasztással, például egy div vagy egy span elemmel határoltuk volna. A példa első sora egy bekezdés első betűjének kiválasztását (3-szor nagyobb lesz, mint a bekezdés többi betűje), míg a második sor egy bekezdés első sorának (sötétkék színű lesz) kiválasztását mutatja be.

Első gyermek látszólagos kiválasztó

További lehetőségünk egy adott gyermek elemről eldöntenünk, hogy első-e a sorban. Azaz például ha a body elemen belül szeretnénk, hogy az első (bevezető) bekezdésünk vastagon legyen szedve, a first-child látszólagos osztály kiválasztó ad nekünk lehetőséget erre:Fontos megjegyeznünk, hogy ha a body dokumentumunkban az első bekezdésünk előtt van egy másik elem (például h1), akkor ez a kiválasztás már nem működik. Azaz nem az első bekezdés elemet, hanem az első bekezdést, amennyiben az az első gyermek elem is, választja ki ez a kiválasztó. Természetesen a következő definíció is elégséges lett volna:A különbség a két kiválasztó között, hogy ez utóbbi egy táblázatban levő bekezdés elemekre is illeszkedik, míg az előző csak a közvetlenül a body-ban levőkre.

Nyelv szerinti látszólagos kiválasztó

A HTML-ben, de más leíró nyelveknél is, lehetőségünk van meghatározni hogy milyen nyelven íródott az adott dokumentum (HTML-nél meta elem a fejlécben), vagy adott elemekre is külön definiálhatjuk ezeket. A CSS biztosít számunkra erre is kiválasztót. Hogy a gyakorlatban mire jó ez (amellett, hogy az angol szavakat pirossal, a németeket kékkel, stb. írhatjuk), egyetlen épkézláb példát találtam, meg lehet határozni a segítségével, hogy milyen idézőjelek szerepeljenek a dokumentumban. Ehhez egy speciális tulajdonság elemet használatunk fel, a quote-ot. Íme:Ha a dokumentumunk Content-Language értéke hu, azaz magyar nyelvű dokumentumról van szó, akkor az idézőjelek alul és felül jelennek meg, míg angol nyelvű dokumentumok esetén mind a kettő felül - ha q elemet használunk az idézésekhez.

Elem előtt és után...

Végezetül lássuk a :before és :after kiválasztókat. Ezek segítségével az adott elem előtti és mögötti látszólagos részeket választjuk ki (fontos: nem az előtte levő elemeket, hanem az elem és az előtte levő elem közötti 0 hosszúságú részt). Több trükköt is meg lehet vele valósítani, egy egyszerű, de nagyszerű például:Ezzel a dokumentumunkban láthatóvá válnak a b elemeink, "mintha" a HTML forrást néznénk.

Összefoglalás

Az eddigi részekben gyakorlatilag áttekintettük az összes kiválasztót, illetve azokat a tulajdonságokat, melyeket általában használni szokás a weblapok készítésekor. A következő részben befejezzük a gyakran használt tulajdonságok áttekintését is, hogy utána még izgalmasabb dolgokkal foglalkozhassunk.