Pseudo selectori

Desi poarta un nume foarte ciudat, pseudo selectorii sunt foarte usor de folosit si foarte foarte folositori atunci cand vrem sa cream o pagina mai interactiva.

Exista doua tipuri de pseudo selectori, unii dinamici si unii statici.

Cel mai des folositi si pe care ne vom axa acum sunt cei dinamici.

Ei se refera la starea unui element atunci cand noi interactionam cu el. De exemplu atunci cand apasam un buton, sau cand trecem cu mouse-ul pe deasupra unui link.

Cel mai adesea acestia sunt folositi pe elementele <button>, <a> si <input />.

Cei mai des intalniti pseudo selectori sunt:

  • :hover atunci cand trecem cu mouse-ul peste un element
  • :active atunci cand se da click pe element
  • :focus folosit destul de des cu elementele <input />, pentru momentul cand se apasa in interiorul casutei

Pentru a le folosi, vom scrie selectorul pentru elementul pe care vrem sa aplicam regula si apoi lipit de el, unul dintre pseudo selectorii de mai sus:

.un-link {
    color: #333;
}
.un-link:active {
    color: #0f633d;
}
Cerinta Scrie un selector pentru elementul <button> care sa ii schimbe culoarea de fundal atunci cand se afla in starea de :hover.