Puteți accesa așa-numitele elemente copil. Acestea sunt cele care sunt direct subordonate altor elemente. Sună destul de abstract, dar poate fi explicat frumos printr-un exemplu.
<body> <p>Paragraf 1</p> <p>Paragraf 2</p> <p>Paragraf 3</p> </body>
Aici body este elementul părinte. Elementele p sunt fiecare elemente copil ale lui body. Pe baza acestei cunoștințe, se poate aplica selectorul de elemente copil.
body>p {
color: blue;
}
Această sintaxă face ca toate paragrafele care sunt copii direcți ai body-ului să fie colorate în albastru.
Urmează un exemplu care arată încă o dată diferențele dintre cele două instrucțiuni body p și body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<div>
<p>Paragraf 4</p>
</div>
</body>
</html>Primele trei paragrafe text definite sunt copii direcți ai body-ului. Instrucțiunea body p atribuie tuturor paragrafelor text culoarea albastră. body>p, la rândul său, are impact exclusiv asupra primelor trei paragrafe text. Prin urmare, aceste paragrafe sunt afișate și cu o dimensiune de caracter mai mare.
Următorul selector pe care vă voi prezenta este selectorul de element următor. Acest selector marchează un element care urmează imediat după un alt element și are același element părinte. Și pentru acesta un exemplu:
h1+p {
color: blue;
}
Prin această sintaxă, culoarea textului unui paragraf este setată la albastru. Acest lucru se aplică însă numai atunci când paragraful urmează imediat după o titlu de nivelul întâi.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: blue;
}
</style>
</head>
<body>
<h1>Titlu</h1>
<p>Paragraf 1</p>
<h2>Titlu</h2>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<div>
<p>Paragraf 4</p>
</div>
</body>
</html>Verificați rezultatul în browser.
Doar primul paragraf va fi afișat aici cu text albastru. Celelalte paragrafe sunt negre. Aceasta se datorează faptului că aceste elemente p nu urmează h1, ci h2.
Cu privire la elementele care urmează, în CSS3 au fost introduse și alte posibilități. Așadar, este acum posibil să accesați toate elementele care urmează unui anumit element. Un exemplu:
h1~p {
color: red;
}
Prin această sintaxă, toate paragrafele care urmează unui h1 sunt vizate.
În CSS se poate accesa nu doar direct elementele. De asemenea, se poate accesa și peste atributele elementelor.
Iată câțiva dintre acești selecționeri:
• [att] – Elementul trebuie să conțină doar atributul. Dacă este furnizat sau nu un anume valoare, nu este relevant.
• a[href] – Toate linkurile (<a href=…>) sunt marcate. Aceasta nu se aplică însă la definițiile de ancoră (<a name=…>).
• [align=left] – Marchează toate elementele ale căror atribut align are valoarea left.
• [attr~=value] – Sunt marcate toate elementele în care valoarea este prezentă într-o listă de valori separate prin spații.
• [attr|=value] – Marchează un element atunci când valoarea specificată este la începutul unui șir de caractere separate prin linie verticală.
• img[width="200"] – Aici sunt marcate toate imaginile care au o lățime de 200 de pixeli.
Evident, apare întrebarea când ar putea fi necesari de fapt astfel de selecționeri de atribute. Gândiți-vă, de exemplu, la un formular și la casetele de bifare definite în acesta. Casetele de bifare sunt – așa cum știți deja – definite prin elementul de intrare input. Problema aici este că elementul input este folosit și pentru definirea câmpurilor normale de introducere a textului. Prin urmare, nu se poate face formatarea diferită pentru casetele de bifare și câmpurile de text obișnuite. Aici intervin selecționerii de atribute. Pentru o mai bună înțelegere a lor, aruncați o privire asupra exemplului următor:
<body> Nume: <input type="text" id="nume" /> <br /> Bărbat: <input type="checkbox" name="gen" id="gen" /> <br /> Femeie: <input type="checkbox" name="gen" id="gen" /> </body>
Aici au fost definite diferite elemente de formular.
• un câmp de introducere a textului
• două casete de bifare
Aceste câmpuri trebuie să fie formatate.
input {
border:3px solid #000;
width: 10em;
}Câmpurilor li se atribuie un cadru și o lățime.
Problemă: Lățimea definită ar trebui să se aplice doar la câmpul de introducere a textului, nu și la casetele de bifare. Cu toate acestea, selectorul de elemente nu permite o distincție între diferitele tipuri de câmpuri aici. Pentru ca o astfel de distincție să funcționeze, se folosește pe selectorii de atribute. Iată un exemplu despre cum poate arăta acest lucru:
input[type="checkbox"] {
width: auto;
}
Prin selectorul arătat, se accesează efectiv doar elementele input care au combinația de valori de atribut type="checkbox".
Replicații
CSS oferă în sfârșit posibilitatea de a aborda replicările. Bineînțeles, apare întrebarea pentru ce ar putea fi bun ceva de genul acesta. Aceste selecții sunt utile, de exemplu, atunci când vrei să stilizezi fiecare a doua linie a unei tabele în altă culoare. Înainte să prezint selecțiile disponibile, iată un exemplu tipic:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Aici avem de-a face cu o listă obișnuită. Prin CSS, fiecare al treilea element din listă ar trebui să primească o culoare de fundal.
Pentru asta se folosește selecționorul nth-child(). Prin acest selector, fiecare al n-lea element copil este selectat.
#sprachen li:nth-child(3n) {
background-color: red;
}
Următorii selecționori sunt disponibili:
• :root – Prin selectorul :root, se poate selecta rădăcina unui document.
• :nth-child(n) – Controlează fiecare al n-lea element în cadrul unui element părinte. Acest selector este util mai ales când mai multe elemente trebuie să fie stilizate diferit. La n, este vorba despre un cuvânt-cheie fix pe care se pot aplica operații de calcul. Se poate considera că n este echivalent cu valoarea 1.
• :nth-last-child(n) – Controlează fiecare al n-lea element dintr-un element, având în vedere că copiii sunt parcurși de la final.
• :nth-of-type(n)– Controlează fiecare al n-lea element de același tip HTML pe aceeași nivel.
• :nth-last-of-type(n) – Controlează fiecare al n-lea element de același nivel, copiii fiind parcurși de la final.
• :first-child – Controlează primul element copil dintr-un element.
• :last-child – Controlează ultimul element copil dintr-un element.
• :first-of-type – Controlează primul element de același tip HTML în cadrul unui element părinte.
• :last-of-type – Controlează ultimul element de același tip HTML în cadrul unui element părinte.
• :only-child – Controlează un element care nu are niciun element frate și reprezintă singurul element copil în elementul părinte.
• :only-of-type – Controlează un element care nu are niciun element frate de același tip HTML și reprezintă singurul element de acest tip în cadrul elementului părinte.
• :empty – Controlează elementele goale.
Selecctorii prezentati fac lucrul cu HTML mult mai ușor, deoarece definirile claselor complicate aparțin trecutului.
