Pseudoclase
În plus față de selectoarele de taguri, clase și identificatori, avem disponibile selectoarele de pseudoclase, care oferă posibilități suplimentare pentru alegerea elementelor necesare.
Lista pseudoclaselor disponibile:
- :root: permite selectarea elementului rădăcină al paginii web, probabil cel mai puțin util selector, deoarece pe o pagină web corectă elementul rădăcină este aproape întotdeauna elementul <html>
- :link: se aplică linkurilor și reprezintă un link în starea sa normală, pe care încă nu s-a efectuat click
- :visited: se aplică linkurilor și reprezintă un link pe care utilizatorul a făcut deja click
- :active: se aplică linkurilor și reprezintă linkul în momentul în care utilizatorul face click pe el
- :hover: reprezintă elementul pe care utilizatorul și-a poziționat cursorul mouse-ului. Se aplică în principal linkurilor, dar poate fi aplicat și altor elemente, de exemplu, paragrafelor
- :focus: reprezintă elementul care obține focus, adică atunci când utilizatorul apasă tasta de tabulație sau face click pe un câmp de intrare (de exemplu, un câmp text)
- :not: permite excluderea unor elemente din lista celor la care se aplică stilul
- :lang: stilizează elementele pe baza valorii atributului lang
- :empty: selectează elementele care nu au elemente încorporate, adică sunt goale
Când se aplică pseudoclasele, înaintea acestora se pune întotdeauna două puncte. De exemplu, stilizarea linkurilor folosind pseudoclasele:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudoclase în CSS3</title>
<style>
a:link {color:blue; text-decoration:none}
a:visited {color:pink; text-decoration:none}
a:hover {color:red; text-decoration:underline}
a:active {color:yellow; text-decoration:underline}
input:hover {border:2px solid red;}
</style>
</head>
<body>
<a href="index.html">Manual de CSS3</a>
<input type="text" />
</body>
</html>Selectorul :not
Selectorul :not() permite selectarea tuturor elementelor în afara celor specificate, adică exclude anumite elemente din selecție.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectoare în CSS3</title>
<style>
a:not(.blueLink) { color: red; }
</style>
</head>
<body>
<a>Prima legătură</a><br/>
<a class="blueLink">A doua legătură</a><br/>
<a>A treia legătură</a>
</body>
</html>
Selectorul a:not(.blueLink) aplică stilul tuturor linkurilor cu excepția celor care au clasa "blueLink". În parantezele pseudoclasei not se transmite selectorul elementelor care trebuie excluse.
Pseudoclasa :lang
Selectorul :lang selectează elementele pe baza atributului lang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectoare în CSS3</title>
<style>
:lang(ru) {
color: red;
}
</style>
</head>
<body>
<form>
<p lang="ru-RU">Eu învăț CSS3</p>
<p lang="en-US">I study CSS3</p>
<p lang="de-DE">Ich lerne CSS3</p>
</form>
</body>
</html>