Pseudo-clasele CSS permit adaugarea de stiluri CSS doar la anumite elemente ale aceluiasi selector, id sau clasa. Acestea se aplica dupa caracterul doua-puncte (:) dupa selectorul CSS.
Sintaxa pentru utilizare pseudo-clase:

element:pseudo-clasa { proprietate:valoare; }
- unde "element" este un selector, id sau clasa, iar "pseudo-clasa" poate fi una din expresiile urmatoare:

Sunt mai multe feluri de pseudo-clase, o lista cu acestea gasiti la: Pseudo-classes.


Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-clasele, studiati exemplele care sunt prezentate in continuare.

Pseudo-clase cu selector

Selectoarele fac referire la tag-urile HTML pe care le denumesc (de ex.: p pentru <p>, li pentru <li>, div pentru <div>, etc.).
- In exemplul urmator este folosit "first-child" pentru paragraf:

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
p:first-child {
color:blue;
}
</style>
</head>
<body>
<p>Un text din primul paragraf</p>
<p>Continut din al doilea paragraf</p>
<p>Textul din al treilea paragraf</p>
</body>
</html>
- Rezultatul va fi urmatorul, primul paragraf va avea textul albastru.

Un text din primul paragraf

Continut din al doilea paragraf

Textul din al treilea paragraf


Iata si un exemplu cu "hover" pentru <li>:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
li:hover {
background-color:#88fe88;
}
</style>
</head>
<body>
<ul>
<li>MarPlo.net</li>
<li>GamV.eu</li>
<li>CoursesWeb.net</li>
</ul>
</body>
</html>
- Cand pozitionati mouse-ul deasupra fiecarui LI, acesta va avea background verde, testati mai jos

Pseudo-clase si class

Trebuie stiut ca pseudo-clasele nu sunt acelasi lucru ca si clasele, acestea fiind cele care fac referire la valoarea atributului "class" si in CSS se adauga dupa un caracter punct (.nume_class).
- Iata un exemplu in care sunt folosite pseudo-clasele "lang(cuvant)" si "last-child" la o clasa ".test'.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.test:last-child {
background-color:#88fe88;
}
.test:lang(da) {
color:blue;
}
</style>
</head>
<body>
<ul>
<li class="test">Text in list cu class .test ...</li>
<li class="test" lang="da">Alt LI cu class .test si lang='da' ...</li>
<li class="test">Ultimul LI cu class .test ...</li>
</ul>
</body>
</html>
- Observati ca stilul definit pentru ".test:last-child" va fi aplicat doar ultimului element care are clasa "test", iar "lang(da)" se aplica numai elementului care pe langa class="test" are si lang="da".
- Rezultatul este acesta:

Iata un alt exemplu in care primul tag <em> (first-child) din fiecare element cu clasa '.test' este ingrosat:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.test em:first-child {
font-weight:bold
}
</style>
</head>
<body>
<p class="test"><em>Paragraf</em> cu mai multe tag-uri EM: <em>text oblic de la EM</em></p>
<p class="test">Alt paragraf: <em>sir inclinat si bold</em>, alt sir <em>italic de la EM</em></p>
</body>
</html>
- Rezultat:

Paragraf cu mai multe tag-uri EM: text oblic de la EM

Alt paragraf: sir inclinat si bold, alt sir italic de la EM

- Daca doriti ca stilul sa fie aplicat tuturor etichetelor <em> din prima clasa, scrieti:   .clasa:first-child em
- Daca vreti sa fie aplicat numai primului <em> din prima clasa, scrieti:   .clasa:first-child em:first-child


Pseudo-clase cu id-uri si elemente de formular

In CSS, id-urile fac referire la valoarea atributului ID si se scriu dupa caracterul #.
- Iata un exemplu in care este folosita pseudo-clasa "hover" impreuna cu un ID, iar "focus" impreuna cu o clasa.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
#unid:hover {
background-color:#cbcbfe;
}

.test:focus {
background-color:#ededfe;
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="text" class="test" /><br />
<textarea cols="20" rows="5" class="test"></textarea><br />
<input type="button" value="Buton" id="unid" />
</form>
</body>
</html>
-Rezultat: cand mouse-ul se afla deasupra butonului (care are id="unid") acesta isi schimba culoarea de fundal, iar cand se da click pe zonele de text din formular (care au class="test"), se modifica culoarea background.


Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
Pseudo-clase CSS

Last accessed pages

  1. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (22066)
  2. Gramatica limbii engleze - Prezentare Generala (72291)
  3. Prepozitii - Prepositions (7819)
  4. HTML5 - Elemente si atribute noi in formular (1341)
  5. HTML5 - Tag-uri Noi (1020)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2613)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1259)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (827)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (807)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (744)