Pseudo-Clase

postat acum 4 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!

Comentariu postate de goyard handbags la data de 18.05.2019
I precisely had to say thanks all over again. I'm not certain the things I might have worked on in the absence of these aspects shown by you about this subject. It actually was the troublesome problem for me, but taking note of the very skilled fashion you solved that took me to jump with contentment. Extremely thankful for the guidance and even hope you really know what a powerful job that you're undertaking teaching people today with the aid of your site. I know that you haven't encountered any of us.