CSS referencia => Látszólagos osztályok és elemek

CSS, 2. fejezet - Látszólagos (pszeudo) osztályok és elemek

A 2. fejezet tartalma:

  1. Látszólagos osztályok az élőkapcsokban
  2. Tipografikai látszólagos elemek
  3. A 'first-line' látszólagos elem
  4. A 'first-letter' látszólagos elem
  5. Látszólagos elemek a szelektorokban
  6. Látszólagos elemek többszörözése

A CSS-ben a beállítandó stílus alapesetben egy HTML elemhez van kapcsolva; ez a kapcsolat az elemnek a dokumentum-struktúrában elfoglalt helyére alapul. Ez az egyszerű modell a stíluslap-alkalmazás viszonylag széleskörű lehetőségét nyújtja, de nem nyújt lehetőséget az összes lehetséges megjelenítés alkalmazására.

A látszólagos (pszeudo) osztályok és elemek a HTML leírásban nem szerepelnek (ezért látszólagosak), mégis köthetőek szelektorokhoz. Tulajdonképpen a böngésző által átadott és a stíluslapon keresztül értelmezett címzési módról van szó. Ugyanúgy kell rájuk hivatkozni, mint bármely elemre, vagy osztályra; ez a szabványos eljárás viselkedésük leírására. Pontosabban: viselkedésük tagek elméleti sorozataként írható le.

A látszólagos elemek az elemek részelemeinek megcímzésére használhatók, a látszólagos osztályok pedig lehetővé teszik a stíluslapon keresztül történő elemtípus megkülönböztetést.

Vissza a hivatkozó oldalra

2.1 Látszólagos osztályok az élőkapcsokban

A böngészők közös tulajdonsága, hogy másképp jelenítik meg a látogatott linkeket, mint a még nem látogatottakat. Ezt a tulajdonságot a CSS az <A> elem látszólagos osztályain keresztül kezelni tudja: 

A:link	{color: red}

A:visited {color: blue}

A:active	 {color:lime}

Minden 'HREF' attribútummal rendelkező <A> elem a fenti csoportból egyet és egy időben csak egyet jelöl ki. A böngészők pedig kiválasztják, hogy az adott linket -állapotától függően- milyen színnel jelenítsék meg. Állapotukat a látszólagos osztály határozza meg:

  • link - Nem látogatott hivatkozás;
  • visited - Már látogatott hivatkozás;
  • active - Amelyik hivatkozás éppen ki van választva (egérkattintással).

Egy élőkapocs látszólagos osztályának formázása ugyanúgy történik, mintha az osztály külön volna definiálva. A böngészők nem követelik meg az aktuálisan megjelenített dokumentum újrabetöltését, amikor egy élőkapocs látszólagos osztálya által meghatározott változtatás esedékessé válik. (Pl.: a CSS szabványos eljárása lehetővé teszi az 'active' link 'font-size' tulajdonságának futásidejű megváltoztatását úgy, hogy az aktív dokumentumot nem kell újra betöltenie a böngészőnek, mikor az olvasó kiválaszt egy 'visited' linket.)

A látszólagos osztályok nem feleltethetőek meg a normál osztályoknak és fordítva; ezért az alábbi példában bemutatott stílusszabályok nem befolyásolják egymást: 

A:link {color: red}

<A CLASS=link NAME=target5>...</A>

Az élőkapocs látszólagos osztályoknak nincs hatásuk az 'A' -n kívül más elemre. Ezért az elemtípus el is hagyható a szelektorból: 

A:link {color: red}

:link {color: red}

Fenti két deklarációban a szelektor ugyanazt az elemet fogja kiválasztani.
A látszólagos osztályok nevei kis- és nagybetű-érzékenyek.

A látszólagos osztályok használhatóak a kapcsolódó szelektorokban is: 

A:link IMG {border: solid blue;}

A látszólagos osztályok kombinálhatók a normál osztályokkal: 

A.external:visited {color: blue}

<A CLASS=external HREF="http://valahol.mashol.com">Külső (external) hivatkozás</A>

Ha a fenti példában levő hivatkozás látogatottá válik (visited), színe kékre változik. Megjegyzendő, hogy a normál osztályok neveinek a látszólagos osztályok neveit meg kell előznie a szelektorban.

Itt látható a látszólagos osztályok működése a gyakorlatban is. Látható, hogy megváltoztattuk a linkek, már látogatott és aktív linkek színét, valamint beállítottuk, hogy azon képek esetén amelyek link szerepet töltenek be, a kép keretének színe is változzon meg. Ezen felül létrehoztunk egy "ajanlott" osztályt, amelyre beállítottuk, hogy amennyiben még nem látogatott a link, a színe legyen kék.

Vissza a hivatkozó oldalra

2.2 Tipográfiai látszólagos elemek

Néhány közös megjelenítési effektus nem strukturális elemhez kapcsolható, hanem inkább a képernyőn elemeket kirajzoló tipográfiai tulajdonságokhoz. A CSS -ben két ilyen tipográfiai tétel címezhető meg látszólagos elemen keresztül: egy elem tartalmának első sora és az első betű.

Vissza a hivatkozó oldalra

2.3 A 'first-line' látszólagos elem

A 'first-line' látszólagos elem az első sor különleges formázásához használható: 

<STYLE TYPE="text/css">

 P:first-line {font-variant: small-caps}

</STYLE>
 

Példa:

A tagek elméleti sorozata a következőképp néz ki: 

<P>

<P:first-line>

A szöveg első sora

</P:first-line>

kiskapitális betűkkel jelenik meg.

</P>

A 'first-line' záró (elméleti) tag -je a kirajzolt sor végére kerül. A 'first-line' látszólagos elem csak blokkszintű elemhez kapcsolható.

A 'first-line' látszólagos elem használata hasonló a soron belüli elemekhez, azonban figyelembe kell venni néhány megszorítást. Csak a következőkben felsorolt tulajdonságok alkalmazhatók hozzá:

  • Betűtípus tulajdonságok (5.2),
  • Szín- és háttér tulajdonságok (5.3),
  • 'word-spacing' (5.4.1),
  • 'letter-spacing' (5.4.2),
  • 'text-decoration' (5.4.3),
  • 'vertical-align' (csak, ha a 'float' tulajdonság értéke 'none'; 5.4.4),
  • 'text-transform' (5.4.5),
  • 'line-height' (5.4.8),
  • 'clear' 5.5.26).

Vissza a hivatkozó oldalra

2.4 A 'first-letter' látszólagos elem

A 'first-letter' látszólagos elem gyakran előforduló használati lehetősége az iniciálé kialakítása, ami gyakran használt tipográfiai effektus. A következőkben felsorolt tulajdonságok alkalmazhatók hozzá:

  • Betűtípus tulajdonságok (5.2),
  • Szín- és háttér tulajdonságok (5.3),
  • 'text-decoration' (5.4.3),
  • 'vertical-align' (csak, ha a 'float' tulajdonság értéke 'none'; 5.4.4),
  • 'text-transform' (5.4.5),
  • 'line-height' (5.4.8),
  • margó tulajdonságai (5.5.1 - 5.5.5),
  • helykitöltő (padding) tulajdonságok (5.5.6 - 5.5.10),
  • szegélytulajdonságok (5.5.11 - 5.5.22),
  • 'float' (5.5.25),
  • 'clear' 5.5.26).

A következő példa bemutatja, hogyan készíthető kétsoros iniciálé:

A böngészőtől függ, mely karakterek tartoznak a 'first-letter' elemhez. Általában a bevezető idézőjelet is belefoglalják.

A 'first-letter' látszólagos elem csak blokkszintű elemhez kapcsolható.

Vissza a hivatkozó oldalra

2.5 Látszólagos elemek a szelektorokban

Kapcsolódó szelektorok esetén a látszólagos elemeknek a szelektor utolsó elemeként kell szerepelniük: 

BODY P:first-letter {color: purple}

A látszólagos elemek kombinálhatóak a szelektorban az osztályokkal is: 

P.alap:first-letter {color: red}

<P CLASS="alap">Első bekezdés</P>

A fenti példában látható stílusmeghatározás az összes olyan P elem első betűjét bíborra színezi, amelynek osztálya 'alap' (class="alap"). Ha látszólagos elemeket osztályokkal, vagy látszólagos osztályokkal kombinálunk, a látszólagos elemet a szelektor utolsó tagjaként kell elhelyezni. Egy szelektorban csak egy látszólagos elem lehet elhelyezve.

Vissza a hivatkozó oldalra

2.6 Látszólagos elemek többszörözése

Néhány látszólagos elem kombinálható: 

P {color: red; font-size: 12pt}

P:first-letter {color: green; font-size: 200%}

P:first-line {color: blue}

A fenti példa minden 'P' elem első betűjét zöldre, a betűméretet pedig ennek 200%-ra, vagyis 24 pontosra állítja. Az első sor többi része kék lesz, a többi része pedig vörös.

Megjegyzendő, hogy a 'first-letter' elemet a 'first-line' elem tartalmazza. A 'first-line' elemre beállított tulajdonságokat a 'first-letter' elem örökli, de az öröklődés szabályánál a 'first-letter' elemre külön beállított tulajdonság-érték erősebb.

előző  tetejére  következő