Pseudo-Clase
Stefanescu Mihai 3 years ago CSSO pseudo-clasa este folosita pentru a specifica o anumita stare a unui element.
De exemplu, putem folos pseudo-clasele pentru:
- modifica stilul unui element cand este pus deaasupra lui cursorul.
- modifca stilul uni link vizitat
Sintaxa
Sintaxa unei pseudo clase:
a:visited{
color: red;
}
De exemplu, cand discutam despre link-uri avem 4 tipuri de pseudo-clase: link, visited, hover si active
link – Un link care nu a fost vizitat
visited – Un link ce deja a fost vizitat
hover – Stilul pe care il are link-ul atunci cand utilizatorul tine cursorul deasupra lui.
active – Stilul pe care il ia link-ul atunci cand e apasat.
a:link {
color: navyblue;
}
a:visited {
color: lightblue;
}
a:hover {
color: red;
}
a:active {
color: orange;
}
Cumbinatii intre clase CSS si pseudo-clase
Dca nu v-ati dat seama deja am sa va spun eu acum, putem combina clasele css cu pseudo-clasele.
a.linkulMeu:hover {
color: red;
}
Pseudo-clasa first-child
Aceasta pseudo-clasa va cauta si aplica un anumit stil decat primului element din interiorul altuia.Codul de mai jos va schimba decat stilul primului element li al tuturor listelor ul:
ul li:first-child{
background: red;
}
La fel de simplu putem schimba stilul tuturor elementelor <span> aflate in elemente <p> ce sunt primul element al altor elemente:
p:first-child span{
color: blue;
}
Pseudo-clasa :lang
Aceasta pseudo-clasa permite definirea anumitor reguli pentru diferite limbi.In exemplul de mai jos pseudo-clasa :lang defineste delimitatorul elementului q cu lang=”ro”
<html>
<head>
<style>
q:lang(ro) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Am alfat ca site-ul <q lang="no">Invata-Programare</q> ma ajuta foarte mult sa invat.</p>
</body>
</html>
