e-gradiva     HTML CSS JavaScript Načrtovanje  
  logotip  
SERŠ Maribor Iskanje Primeri

PSEVDO PODRAZREDI

Psevdorazredi in psevdoelementi so že v naprej določeni razredi in jih ne moremo sami definirati.

Pri elementu <a> ločimo več stanj, ki jih opišemo s posebnimi psevdorazredi: link (neobiskana povezava), visited (obiskana povezava), active (kliknili smo na povezavo, gumb še držimo), hover (z miško smo nad povezavo, gumba nismo pritisnili).

Sintaksa psevdo razreda:

selektor:psevdo_razred {lastnost: vrednost}

V spodnjem primeru so opisani primeri za povezavo.

primeropis
a {font-family:Arial}
velja za vse
a:link {
color: red;
font-style: normal;
text-decoration: none }
običajna oblika povezave
a:visited {
color: green;
font-style: normal;
text-decoration: line-through; }
obiskana povezava
a:active {
color: blue;
font-style: italic;
text-decoration: none }
aktivna povezava
a:hover {
color: yellow;
font-style: normal;
text-decoration: underline }
z miško nad povezavo

Psevdorazredi in psevdoelementi

Na enak način so narejeni psevdorazredi in psevdoelementi

Psevdorazredi

Psevdo razred Opis NN IE CSS
active Aktivna povezava.   4 1
hover Ko smo z miško na povezavi.   4 1
linkNormalna oblika povezave. 4 3 1
visitedKo je povezava že bila obiskana. 4 3 1
firstDoloča prvo stran dokumenta. 6 5 2
leftDoloča leve strani v dokumentu. 6 5 2
rightDoloča desne strani v dokumentu. 6 5 2
first-childDoloča lastnost prvega otroka nekega elementa     1
langDoloča jezik nekega elementa po ISO 639 in RFC.     2

Psevdoelementi

Psevdo element Opis NN IE CSS
first-letterPrvi znak v elementu, npr. prva črka v odstavku. 6 5 1
first-linePrva vrstica v elementu, npr. prva vrstica v odstavku. 6 5 1
beforeUporablja se z lastnostjo content, vsebina pred 6   2
afterUporablja se z lastnostjo content, vsebina za 6   2

Primer

p#pv:first-letter
{
color: orange;
font-size: 400%;
float:left
}

→ Primer psevdoelementa (prva črka, first-letter)
→ Primer psevdoelementa (prva vrsta, first-line)
→ Primer psevdoelementa (za elementom, after)

gor Gor     e-gradiva     CSS     primeri     nazaj Atribut class   Atribut id naprej

SERŠ Maribor : Strokovna gimnazija : 2002 : Niko Fajfar