Da pe Twitter
Da pe FacebookPseudo-clasele CSS sunt utilizate pentru a adauga efecte speciale anumitor selectori.
Sintaxa
Sintaxa pseudo-claselor este urmatoarea:
selector:pseudo-class {property: value}
Deasemeni se pot folosi si clase CSS cu pseudo-clase:
selector.class:pseudo-class {property: value}
Pseudo-clasele Ancora (Anchor Pseudo-classes)
Un link activ, vizitat, nevizitat, sau cand se trece mouse-ul peste un link, toate se pot afisa in moduri diferite in browser-ele cu suport CSS:
a:link {color: #FF0000} /* link nevizitat */
a:visited {color: #00FF00} /* link vizitat */
a:hover {color: #FF00FF} /* mouse peste link */
a:active {color: #0000FF} /* link selectat */
ATENTIE! a:hover trebuie sa fie declarat dupa a:link si a:visited in definitia CSS pentru a-si produce efectul!
ATENTIE! a:active trebuie sa fie declarat dupa a:hover in definitia CSS pentru a-si produce efectul!
ATENTIE! Numele pseudo-clasei nu este sensibil lietere mari/mici.
Pseudo-clasele si Clasele CSS
Pseudo-clasele pot fi combinate cu clasele CSS:
a.red:visited {color: #FF0000}
<a href="sintaxa_css.php">Sintaxa Css</a>
Daca link-ul din exemplul de mai sus a fost vizitat va fi afisat colorat in rosu.
CSS2 - Pseudo-Clasa :first-child
Pseudo-clasa :first-child se aplica elementului care este copil prim al unui alt element.
ATENTIE! Pentru ca pseudo-clasa :first-child sa functioneze si pe IE va trebui declarata si <!DOCTYPE>.
Primul element <p>
In exemplul urmator selectorul se va aplica oricarui element <p> care este primul element copil:
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue
}
</style>
</head>
<body> <p>Primul Paragraf</p> <p>Al doilea paragraf</p> </body> </html>
Primul element <i> in toate elementele <p>
In exemplul urmator selectorul se va aplica primului element <i> in toate elementele <p>:
<html>
<head>
<style type="text/css">
p > i:first-child
{
font-weight:bold
}
</style>
</head>
<body> <p>Aici <i>este</i> un paragraf. Aici <i>este</i> acelasi paragraf.</p> <p>Aici <i>este</i> un paragraf. Aici <i>este</i> acelasi paragraf.</p> </body> </html>
Se aplica tuturor elementelor <i> care se gasesc imbricate in elementul <p> copil prim al unui alt element
In exemplul urmator selectorul se va aplica tuturor elementelor <i> impricate in elementele <p> care sunt primul copil al unui alt element.
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue
}
</style>
</head>
<body> <p>Aici <i>este</i> un paragraf. Aici <i>este</i> acelasi paragraf.</p> <p>Aici <i>este</i> un paragraf. Aici <i>este</i> acelasi paragraf.</p> </body> </html>
CSS2 – Pseudo clasa :lang
Pseudo clasa :lang permite definirea unor reguli speciale pentru limbi diferite. In exemplul urmator clasa :lang defineste tipul ghilimelelor folosite pentru elementele q cu atributul cu valoarea “ro”:
<html>
<head>
<style type="text/css">
q:lang(ro)
{
quotes: "~" "~"
}
</style>
</head>
<body> <p>Un text<q lang="ro">Citat intr-un paragraf</q> Un text.</p> </body>
</html>
Pseudo-clasele
Browsere: IE: Internet Explorer, F: Firefox, N: Netscape.
| Pseudo-clasa | Descriere | IE | F | N | W3C |
|---|---|---|---|---|---|
| :active | Adauga un stil special unui element la activare | 4 | 1 | 8 | 1 |
| :focus | Adauga un stil special unui element atata timp cat este activ | - | 1.5 | 8 | 2 |
| :hover | Adauga un stil special unui element cand se trece cu mouse-ul peste el | 4 | 1 | 7 | 1 |
| :link | Adauga un stil special unui link nevizitat | 3 | 1 | 4 | 1 |
| :visited | Adauga un stil special unui link vizitat | 3 | 1 | 4 | 1 |
| :first-child | Adauga un stil special unui element ca este primul copil al unui alt element | 7 | 1 | 7 | 2 |
| :lang | Permite autorului sa specifice limba care sa se utilizeze in cazul unui element | - | 1 | 8 | 2 |
