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:
Sunt mai multe feluri de pseudo-clase, o lista cu acestea gasiti la: Pseudo-classes.
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>
Un text din primul paragraf
Continut din al doilea paragraf
Textul din al treilea paragraf
<!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>
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>
<!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>
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
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>
<div style="width: 80%; border: 3px solid #888888;">Continut</div>
#un_id { transform: skew(20deg, 25deg); -ms-transform: skew(20deg, 25deg); /* IE 9 */ -webkit-transform: skew(20deg, 25deg); /* Safari and Chrome */ }
var rightnow = new Date(); alert( rightnow.toString() );
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>"); // aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr $arr = array_map("strip_tags", $arr); }
On Saturday I visit my grandparents. - Sambata imi vizitez bunicii.
Sábado visito mis abuelos. - Sambata imi vizitez bunicii.