Ar fi vreo două aspecte privind stilizarea elementelor care au anumite valori ale atributelor sau chiar conţinutul lor.
Stilizare pentru elemente cu anumite atribute
De exemplu, la anumite atribute pentru elementul <a>, putem seta diferit toate elementele de acest tip care au target ce deschid o nouă fereastră sub forma: [atribut="valoare"]
|
1 |
a[target="_blank"] {text-decoration: none;} |
|
1 |
<a href="https://www.tic.ovio.ro" target="_blank">tic.ovio.ro</a> |
De asemenea, dacă anumite elemente au o anumită valoare, spre exemplu, caracteristica title, se poate formata adecvat; mai mult de atât, dacă, în loc de= folosim ~= atunci va formata toate elementele care conţin acea caracteristică: [atribut~="valoare"]. De menţionat că acea valoare nu trebuie să fie lipită de altele, nici măcar prin cratimă. Dacă ne dorim să aplicăm anumite formatări pentru cazul în care caracteristica conţine un text anume, putem folosi [atribut*="valoare"].
|
1 2 |
[title~="worker"] {border: 5px solid yellow;} [class*="te"] {color: red;} |
|
1 2 |
<a href="#" title="worker">Text proba</a> <div class="clasa-test">aaaa</div> |
Dacă avem nevoie de formatări ale elementelor care au valori despărţit prin cratimă, vom volosi [atribut|="valoare"]. În exemplul de mai jos, vor fi formatate elementele care au doar cuvântul „continut” sau urmat de cratimă (deci, valide vor fi clasele continut, continut-titlu, dar nu continutTitlu, nici continut titlu
|
1 |
[class|="continut"] {color: red;} |
|
1 |
<p class="continut-titlu">Hello world!</p> |
Dacă ne interesează atribute care încep cu anumite litere, alegem [atribut^="valoare"], nemaicontând cratima sau spaţiul. La antipod se află [atribut$="valoare"], adică acele caracteristici care se termină cu o anumită expresie.
|
1 2 |
[class^="continut"] {color: red;} [class$="Titlu"] {color: blue;} /* aceste caracteristici sunt case=sensitive */ |
|
1 |
<p class="continutTitlu">Hello world!</p> |
Stilizare elemente care includ anumit text
Folosindu-ne de JavaScript, putem să stilizăm elemente care conţin un text anume. Pentru aceasta creăm o funcţie care să aplice o clasă pentru elemente care conţin un şir anume de text.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function adaugaClasaLaElem(tip_elem, txt_caut, nume_clasa) { const divs = document.querySelectorAll(tip_elem); for (const div of divs) { if (div.textContent.includes(txt_caut)) { div.classList.add(nume_clasa); } } } adaugaClasaLaElem('div', "test", "string_inclus"); </script> |
Aşadar, pentru elementele de tip <div> care conţin sirul de caractere „test” se va aplica clasa string_inclus. Iar clasa respectivă ar putea fi aşa:
.string_inclus {color: red}
Dacă este să ne raportăm la mai multe cuvinte (de exemplu, la acest site, dacă dorim să formatăm diferit rubrica „Sursă/Surse”, cum este şi la acest articol, unde linkurile, cu tot cu titlul rubricii, uneori având doar o sursă, deci „Sursa” sau „Sursă”, alteori, mai multe, deci „Surse”, vom folosi funcţia de mai jos.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function adaugaClasaLaElem(tip_elem, cuvinte_cautate, nume_clasa) { const elemente = document.querySelectorAll(tip_elem); for (const elem of elemente) { const areCuvant = cuvinte_cautate.some(cuvant => elem.textContent.includes(cuvant)); if (areCuvant) {elem.classList.add(nume_clasa);} } } const cuvinte = ["Sursă:", "Surse:", "Sursa:"]; adaugaClasaLaElem('small', cuvinte, "surse-post"); </script> |
