Pseudoclasele elementelor copil
O grupă specială de pseudoclase sunt cele care permit selectarea anumitor elemente copil:
- :first-child: reprezintă elementul care este primul copil al părintelui său
- :last-child: reprezintă elementul care este ultimul copil al părintelui său
- :only-child: reprezintă elementul care este singurul copil într-un anumit container
- :only-of-type: selectează elementul care este singurul element de un anumit tip (tag) într-un anumit container
- :nth-child(n): reprezintă elementul copil care are un anumit număr n, de exemplu, al doilea copil
- :nth-last-child(n): reprezintă elementul copil care are un anumit număr n, începând de la sfârșit
- :nth-of-type(n): selectează elementul copil de un anumit tip care are un anumit număr
- :nth-last-of-type(n): selectează elementul copil de un anumit tip care are un anumit număr, începând de la sfârșit
Pseudoclasa first-child
Folosim pseudoclasa first-child pentru a selecta primele linkuri din blocuri:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectoare în CSS3</title>
<style>
a:first-child{
color: red;
}
</style>
</head>
<body>
<h3>Tablete</h3>
<div>
<a>Microsoft Surface Pro 4</a><br/>
<a>Apple iPad Pro</a><br/>
<a>ASUS ZenPad Z380KL</a>
</div>
<h3>Smartphone-uri</h3>
<div>
<p>Top smartphone-uri 2016</p>
<a>Samsung Galaxy S7</a><br/>
<a>Apple iPhone SE</a><br/>
<a>Huawei P9</a>
</div>
</body>
</html>
Stilul de către selectorul a:first-child se aplică linkului dacă este primul copil al oricărui element.
În primul bloc, elementul link este primul copil, astfel îi este aplicat stilul definit.
În al doilea bloc, primul element este un paragraf, așadar niciunui link nu îi este aplicat stilul.
Pseudoclasa last-child
Utilizăm pseudoclasa last-child:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectoare în CSS3</title>
<style>
a:last-child{
color: blue;
}
</style>
</head>
<body>
<h3>Smartphone-uri</h3>
<div>
<a>Samsung Galaxy S7</a><br/>
<a>Apple iPhone SE</a><br/>
<a>Huawei P9</a>
</div>
<h3>Tablete</h3>
<div>
<a>Microsoft Surface Pro 4</a><br/>
<a>Apple iPad Pro</a><br/>
<a>ASUS ZenPad Z380KL</a>
<p>Date pentru 2016</p>
</div>
</body>
</html>
Selectorul a:last-child definește stilul pentru linkurile care sunt ultimii copii.
În primul bloc, chiar ultimul copil este un link. În schimb, în al doilea, ultimul copil este un paragraf, deci în al doilea bloc stilul nu se aplică niciunui link.
Selectorul only-child
Selectorul :only-child selectează elementele care sunt singurii copii în containerii lor:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectoare în CSS3</title>
<style>
p:only-child{
color:red;
}
</style>
</head>
<body>
<h2>Titlu</h2>
<div>
<p>Text1</p>
</div>
<div>
<p>Text2</p>
<p>Text3</p>
</div>
<div>
<p>Text4</p>
</div>
</body>
</html>Paragrafele cu textele "Text1" și "Text4" sunt singurii copii în containerele lor exterioare, deci li se aplică stilul - culoarea fontului roșu.
Pseudoclasa :only-of-type
Pseudoclasa :only-of-type selectează elementul care este singurul de un anumit tip în containerul său. De exemplu, singurul element div, în timp ce containerul poate conține oricâte elemente de alte tipuri.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectoare în CSS3</title>
<style>
span:only-of-type{
color: green; /* culoare verde */
}
p:only-of-type{
color: red; /* culoare roșie */
}
div:only-of-type{
color: blue; /* culoare albastră */
}
</style>
</head>
<body>
<div>
Header
</div>
<p>Paragraf unic și <span>element span</span></p>
<div>
Footer
</div>
</body>
</html>Chiar dacă pentru elementele div este definit un stil, acesta nu va fi aplicat, deoarece în containerul body se află două elemente div, nu unul. Însă, în body există doar un element p, prin urmare acesta va fi stilizat. Și, de asemenea, în containerul p există doar un element span, prin urmare și acesta va fi stilizat.
Pseudoclasa nth-child
Pseudoclasa nth-child permite să stilizezi fiecare al doilea, al treilea element, doar elementele pare sau doar cele impare și așa mai departe.
De exemplu, stilizăm liniile pare și impare ale unui tabel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectori în CSS3</title>
<style>
tr:nth-child(odd) { background-color: #bbb; }
tr:nth-child(even) { background-color: #fff; }
</style>
</head>
<body>
<h3>Smartphone-uri</h3>
<table>
<tr><td>Samsung</td><td>Galaxy S7 Edge</td><td>60000</td></tr>
<tr><td>Apple</td><td>iPhone SE</td><td>39000</td></tr>
<tr><td>Microsoft</td><td>Lumia 650</td><td>13500</td></tr>
<tr><td>Alcatel</td><td>Idol S4</td><td>30000</td></tr>
<tr><td>Huawei</td><td>P9</td><td>60000</td></tr>
<tr><td>HTC</td><td>HTC 10</td><td>50000</td></tr>
<tr><td>Meizu</td><td>Pro 6</td><td>40000</td></tr>
<tr><td>Xiaomi</td><td>Mi5</td><td>35000</td></tr>
</table>
</body>
</html>
Pentru a defini stilul pentru elementele impare, în selector se transmite valoarea "odd":
tr:nth-child(odd){}Pentru stilizarea elementelor pare, în selector se transmite valoarea "even":
tr:nth-child(even){}De asemenea, în acest selector putem transmite numărul elementului stilizat:
tr:nth-child(3) { background-color: #bbb; }În acest caz, se stilizează a treia linie.
O altă posibilitate este utilizarea substituentului pentru număr, care este exprimat prin litera n:
tr:nth-child(2n+1) { background-color: #bbb; }Aici, stilul este aplicat fiecărei a doua linii impare.
Numărul înainte de n (în acest caz 2) reprezintă acel element copil care va fi selectat în continuare. Numărul care urmează după semnul plus indică de la ce element trebuie să înceapă selecția, adică +1 înseamnă că trebuie să începi de la primul element copil.
Astfel, în acest caz, selecția începe de la primul element, iar următorul selectat este 2 * 1 + 1 = al 3-lea element, apoi 2 * 2 + 1 = al 5-lea element și așa mai departe.
De exemplu, dacă dorim să selectăm fiecare al treilea element, începând cu al doilea, am putea scrie:
tr:nth-child(3n+2) { background-color: #bbb; }Pseudoclasa :nth-last-child oferă, în esență, aceeași funcționalitate, doar că numărătoarea elementelor începe nu de la început, ci de la sfârșit:
tr:nth-last-child(2) {
background-color: #bbb; /* a doua linie de la sfârșit, adică penultima */
}
tr:nth-last-child(2n+1) {
background-color: #eee; /* liniile impare, începând de la sfârșit */
}
Pseudoclasa nth-of-type
Pseudoclasa :nth-of-type permite să selectezi un element copil de un anumit tip după un anumit număr:
tr:nth-of-type(2) {
background-color: #bbb;
}Similar funcționează pseudoclasa nth-last-of-type, doar că acum numărătoarea elementelor începe de la sfârșit:
tr:nth-last-of-type(2n) {
background-color: #bbb;
}