Pseudo-Clase

Stefanescu Mihai 2 years ago 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>

 

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.