Pseudo-clasele permit adaugarea de stiluri CSS doar la anumite elemente ale aceluiasi selector, id sau clasa.
De exemplu, cand definiti un stil pentru un anumit tag HTML sau pentru o clasa, continutul din toate aceleasi tag-uri sau aceeasi clasa vor avea acel stil, iar daca doriti sa definiti un stil diferit pentru primul (sau ultimul) din acele tag-uri ori pentru primul continut definit de aceeasi clasa, puteti realiza asta folosind pseudo-clasele. De asemenea, acestea pot modifica stilul grafic al elementelor cand mouse-ul actioneaza asupra lor.
Pentru a functiona in Internet Explorer 7+ este necesar declararea <!DOCTYPE>, care se adauga la inceputul documentului HTML, mai multe detalii (in engleza) gasiti Aici.
Sintaxa pentru utilizarea pseudo-clasei este urmatoarea:
                element:pseudo-clasa { proprietate:valoare; }
- unde "element" este un selector, id sau clasa, iar "pseudo-clasa" este una din expresiile urmatoare:


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

1. 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 1</title>
<style type="text/css">
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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 2</title>
<style type="text/css">
li:hover {
    background-color:#88fe88;
}
</style>
</head>
<body>
<ul>
  <li>Text list 1 ...</li>
  <li>Text list 2 ...</li>
  <li>Text list 3 ...</li>
</ul>
</body>
</html>
- Cand pozitionati mouse-ul deasupra fiecarui LI, acesta va avea background verde, testati mai jos

2. Pseudo-clase si clase

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 (.).
Iata un exemplu in care sunt folosite pseudo-clasele "lang(cuvant)" (pt. IE incepand cu versiunea 8) sl "last-child" la o clasa ".test'

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 3</title>
<style type="text/css">
.test:last-child {
    background-color:#88fe88;
}

.test:lang(da) {
    color:blue;
}
</style>
</head>
<body>
<ul>
  <li class="test">Text in list cu class 1 ...</li>
  <li class="test" lang="da">Text in list cu class 2 ...</li>
  <li class="test">Text in list cu class 3 ...</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 sunt combinate o clasa (test), un selector (tag <i>) si "first-child":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 4</title>
<style type="text/css">
.test i:first-child {
    font-weight:bold
}
</style>
</head>
<body>
<p class="test"><i>Paragraf</i> cu mai multe tag-uri I: <i>text oblic</i>, alt test <i>oblic</i></p>
<p class="test">Alt paragraf: <i>sir inclinat si bold</i>, alt sir <i>italic</i></p>
</body>
</html>
- Stilul CSS va fi aplicat primelor tag-uri <i> din fiecare clasa ".test", dupa cu puteti vedea mai jos

Paragraf cu mai multe tag-uri I: text oblic, alt test oblic

Alt paragraf: sir inclinat si bold, alt sir italic

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

3. 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 (focus nu functioneaza pe versiuni de IE mai mici de 8)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 5</title>
<style type="text/css">
#unid:hover {
    background-color:#dadafe;
}

.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>
- Stilul CSS definit in acest exemplu face ca atunci cand mouse-ul se afla deasupra butonului (care are id="unid") acesta sa isi schimbe culoarea de fundal, iar cand se da click pe zonele de text din formular (care au class="test"), la fel se modifica culoarea background.
- Rezultatul este urmatorul formular.


Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
Pseudo-clase

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1474)
  2. Articolul din limba engleza - The article (775)
  3. Backgammon (686)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (2254)
  5. Pronumele in limba engleza - Pronouns (761)

Popular pages this month

  1. Bubbles3 (3188)
  2. Gramatica limbii engleze - Prezentare Generala (2486)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2254)
  4. Butterfly Kyodai (2024)
  5. Zuma Deluxe (1954)