CSS látszólagos osztályok és elemek

A mai napon megismerkedünk az egyik "legbonyolultabb" CSS "dologgal". Ezek nem mások, mint a látszólagos osztályok és elemek. A linkek formázásánál beszéltünk a a :hover, :active, :visited stb. dolgokról. Akkor még nem tudtuk, hogy ezek látszólagos osztályok.

De mire is jók a látszólagos osztályok? Segítségével speciális effekteket adhatunk a szelektornak (szelektor az, amit eddig elemnek neveztünk, csak a CSS-ben az szelektor :D). Tehát nézzük meg a látszólagos osztályok szintaxisát

elem:látszólagososztály{tulajdonság:érték;}


Gondolom bonyolultnak tűnik, de valójában nem az. Nézzük meg ugyan ezt egy már meglátogatott link esetében, részleteiben:

elem: a
látszólagos osztály: visited
tulajdonság: color
érték: green


A "képletbe behelyettesítve:

a:visited{color:green;}

Gyakorlatilag mindent tanultunk már. A továbbiakban megismerkedünk néhány új osztállyal.

:FIRST-CHILD

Magyarul első gyerek. Azt jelenti, hogyha van mondjuk 6 linkem. Megadom, hogy a link első gyermekének a betűszíne legyen lila, akkor CSAK az első link betűszíne lesz lila, hiszen az <a> tag-nek az első gyermeke az első link.

Van lehetőségünk olyanra is, hogy minden bekezdés első félkövér eleme legyen kék színű.

p b:first-child{
color:blue;
}

Tehát minden p-n belül a félkövér tag-nek az első gyermeke legyen kék színű.

Fordítva is meg tudjuk csinálni. A feladat a következő: az első bekezdés félkövér elemei legyenek kékek.
Kód:

p:first-child b{
color:blue;
}


Tehát a bekezdés tag első gyermekén belül a félkövér elemek kékek.

LÁTSZÓLAGOS ELEMEK

Most pedig beszéljünk meg pár látszólagos elemet (olyanok mint a first-child, csak mást csinál :D):

• first-line - az első sort formázza
• first-letter - az első betűt formázza
• before - ezzel az elem elé rakhatunk valamit (pl. képet) Itt látható.
• after - ezzel az elem után rakhatunk valamit (pl.képet) Itt látható.
• focus - formoknál, a különböző inputoknál használatos. Az éppen használatban lévő input tulajdonságait adja meg. 

Ezeknek a használata ugyan olyan, mint pl. a first-child-nak.

p:first-line{

color:red;

}

Ez minden bekezdés első sorának betűszínét kékre változtatja.

A következő leckében megnézünk 2 "gyakorlati" feladatot (a w3-as tananyag része). Addig is jó tanulást!