Pseudo-Clase

postat acum 2 ani de Stefanescu Mihai in categorie CSS

O 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>

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!