Pseudo-clase
Pseudo-clasele permit adaugarea de stiluri CSS doar la anumite elemente ale aceluiasi selector, id sau clasa.
De exemplu, cand definiti un stil pentru un anumit tag HTML sau pentru o clasa, continutul din toate aceleasi tag-uri sau aceeasi clasa vor avea acel stil, iar daca doriti sa definiti un stil diferit pentru primul (sau ultimul) din acele tag-uri ori pentru primul continut definit de aceeasi clasa, puteti realiza asta folosind pseudo-clasele. De asemenea, acestea pot modifica stilul grafic al elementelor cand mouse-ul actioneaza asupra lor.
Pentru a functiona in Internet Explorer 7+ este necesar declararea <!DOCTYPE>, care se adauga la inceputul documentului HTML, mai multe detalii (in engleza) gasiti Aici.
Sintaxa pentru utilizarea pseudo-clasei este urmatoarea:
element:pseudo-clasa { proprietate:valoare; }
- unde "element" este un selector, id sau clasa, iar "pseudo-clasa" este una din expresiile urmatoare:
- active - Adauga un stil unui element cand acesta este activat (actionat prin click pe el)
- first-child - Adauga un stil unui element care este primul din acel tip de elemente
- focus - Folosit pentru input-urile de formulare, le adauga un stil cand acestea sunt active (dupa click si cursorul de text in ele)
- hover - Adauga un stil unui element cand mouse-ul se afla deasupra lui
- lang(cuvant) - Adauga un stil unui element care are atributul lang="cuvant" (nu e suportat de Safari si IE mai mic de 8)
- last-child - Adauga un stil unui element care este ultimul din acel tip de elemente
- link - Adauga un stil unui link nevizitat
- visited - Adauga un stil unui link vizitat
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-clasele, studiati exemplele care sunt prezentate in continuare.
1. Pseudo-clase cu selector
Selectoarele fac referire la tag-urile HTML pe care le denumesc (de ex.: p pentru <p>, li pentru <li>, div pentru <div>, etc.).
In exemplul urmator este folosit "first-child" pentru paragraf:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 1</title>
<style type="text/css">
p:first-child {
color:blue;
}
</style>
</head>
<body>
<p>Un text din primul paragraf</p>
<p>Continut din al doilea paragraf</p>
<p>Textul din al treilea paragraf</p>
</body>
</html>
Un text din primul paragraf
Continut din al doilea paragraf
Textul din al treilea paragraf
Iata si un exemplu cu "hover" pentru <li>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 2</title>
<style type="text/css">
li:hover {
background-color:#88fe88;
}
</style>
</head>
<body>
<ul>
<li>Text list 1 ...</li>
<li>Text list 2 ...</li>
<li>Text list 3 ...</li>
</ul>
</body>
</html>
- Text list 1 ...
- Text list 2 ...
- Text list 3 ...
2. Pseudo-clase si clase
Trebuie stiut ca pseudo-clasele nu sunt acelasi lucru ca si clasele, acestea fiind cele care fac referire la valoarea atributului "class" si in CSS se adauga dupa un caracter punct (.).
Iata un exemplu in care sunt folosite pseudo-clasele "lang(cuvant)" (pt. IE incepand cu versiunea 8) sl "last-child" la o clasa ".test'
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 3</title>
<style type="text/css">
.test:last-child {
background-color:#88fe88;
}
.test:lang(da) {
color:blue;
}
</style>
</head>
<body>
<ul>
<li class="test">Text in list cu class 1 ...</li>
<li class="test" lang="da">Text in list cu class 2 ...</li>
<li class="test">Text in list cu class 3 ...</li>
</ul>
</body>
</html>
- Rezultatul este acesta:
- Text in list cu class 1 ...
- Text in list cu class 2 ...
- Text in list cu class 3 ...
Iata un alt exemplu in care sunt combinate o clasa (test), un selector (tag <i>) si "first-child":
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 4</title>
<style type="text/css">
.test i:first-child {
font-weight:bold
}
</style>
</head>
<body>
<p class="test"><i>Paragraf</i> cu mai multe tag-uri I: <i>text oblic</i>, alt test <i>oblic</i></p>
<p class="test">Alt paragraf: <i>sir inclinat si bold</i>, alt sir <i>italic</i></p>
</body>
</html>
Paragraf cu mai multe tag-uri I: text oblic, alt test oblic
Alt paragraf: sir inclinat si bold, alt sir italic
- Daca vreti sa fie aplicat numai primului <i> din prima clasa, scrieti: .clasa:first-child i:first-child
3. Pseudo-clase cu id-uri si elemente de formular
In CSS, id-urile fac referire la valoarea atributului ID si se scriu dupa caracterul #.
Iata un exemplu in care este folosita pseudo-clasa "hover" impreuna cu un ID, iar "focus" impreuna cu o clasa (focus nu functioneaza pe versiuni de IE mai mici de 8)
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 5</title>
<style type="text/css">
#unid:hover {
background-color:#dadafe;
}
.test:focus {
background-color:#ededfe;
}
</style>
</head>
<body>
<form action="" method="post">
<input type="text" class="test" /><br />
<textarea cols="20" rows="5" class="test"></textarea><br />
<input type="button" value="Buton" id="unid" />
</form>
</body>
</html>
- Rezultatul este urmatorul formular.