HTML/CSS pentru bloggeri: targetare fină

Fiecare blogger trebuie să modifice câte ceva la partea de HTML/CSS a blogului, dar puțini știu cum pot să modifice exact elementul acela care îi tot deranjează. De cele mai multe ori nu poți modifica CSS-ul unui element folosind o soluție de genul:

#header element {color: red; }

Aici intervine targetarea fină prin care un element din pagină poate fi modificat știindu-i atributele sale. De cele mai multe ori un element precum un link <a> sau un <div> vor avea atribute precum „style”, „rel”, „data”, „class”, „id” și multe altele.

Tu poți modifica textul unui anumit element tocmai știind acele atribute. Exemplu:
1. se dă linkul de mai jos cu atributul rel=”slide1″, folosit adesea la slidere pentru imagini
<a href="#" rel="slide1"> <img src="" /> </a>

2. poți modifica anumiți parametrii ai imaginii din acel slide tocmai prin targetare fină. Iată CSS-ul:
a[rel='slide1'] img {
width: 50%;
}

Lucrând în forumul Bigcommerce am avut ocazia să creez un mic tutorial pe tema aceasta și sper să apuci să îl citești.

Pe scurt, targetarea fină în CSS se face știind structura aceasta:
element[atribut='valoare'] {
proprietare: valoare1;
}

Ceea ce vezi mai sus este targetarea exactă atunci când știi exact ce valoare are atributul respectiv. În articole viitoare vom targeta elemente care conțin doar o anumită valoare în atribut ori încep cu anumite caractere în acea valoare.

***

Bonus: Ce este interesant în toată povestea cu targetarea fină este că poți adăuga tu orice atribut vrei la elementul HTML, asta dacă ai acces la acel element, și apoi poți aplica CSS folosindu-te de acel atribut.

Iată exemplu de mai jos. Dacă te uiți cu Inspect Tool de la Chrome (CTRL+SHIFT+I), atunci vei vedea codul acesta:
<div blogger="Manuel">My bio is here.Thank you!</div>

Ca idee, atributul „blogger” atașat oricărui element HTML nu există. Tocmai l-am creat în codul de mai jos.

Rezultatul: