CSS pametni selektor atributa

Hoću da iskoristim moć CSS selektora kako bih napravio pametan CSS. Ideja je sleće:

Želim da napravim "pametne" linkove koji će pokazivati da li je protokol http ili https. Ako je https da promeni boju linka u zeleno.

Pristup problemu

Razmišljamo kako je ovo moguće? Ok, hajde da krenemo od rešenja u javaskripti.

Prvo rešenje koje sam smislio je da koristimo regex, prođemo kroz tekst i nadjemo linkove.

var links = document.getElementsByTagName('a'); // Nadjemo sve linkove
var href;
for (var i = 0; i < links.length; i++){ // Moguce je koristis for..of za nodelistu
  href = links[i].getAttribute('href'); // Izvučemo href atribut
  if(href.match(/https:/)){ //proverimo da li atribut počinje sa https
  	links[i].className += " siguran"; // ako jeste onda dodamo klasu siguran
  }
}

Način na koji smo rešili ovaj problem u JS-u je tako što smo našli (selektovali) sve linkove čiji atribut href počinje sa https.
Ovo je, ustvari, moguće uraditi i u CSS-u.

Selektor atributa

U CSS-u postoji selektor atributa i on postoji još od verzije CSS2. Tako da je ovaj selektor podržan na svim većim pregledačima.

Kako se pišu atribut selektori

Atribut selektori se pišu sa kockastim zagradam, ako ste ikad koristili jQuery i selektovali atribut, verovatno ste upoznati.

Između kockastih zagrada [ ] navedemo ime atributa,a moguće je navesti i vrednost

[attr]{}

Selektuje elemente koji imaju atribut attr.

<div attr="test">Imam atribut attr.</div>

Možemo da selektujemo atribute sa određenom vrednošću

[attr="novi"]{} /* moguće je napisati bez navodnika */

<div attr="test">Ja nisam selektovan :(</div>
<div attr="novi">Ja sam selektovan :D</div>

Ok, ovo sve je lepo ali kako će nam ovo pomoći? U ovoj formi ne još, ali uvešćemo džokerske znakove.

Džoker znakovi

Džoker znakovi su specijalni znakovi koji stoje na mestu nepoznatih znakova u tekstualnoj vrednosti i prikladni su za pronalaženje više stavki sa sličnim, ali ne identičnim podacima.

Dodavanjem džoker znakova u selektor atributa možemo dobiti pametan selektor

Atribut sadži

Dodavanjem * ispred znaka =, selektujemo sve elemente sa atributom koji sadrži datu reč.

[attr*="beograd"]{}
[attr*="beli grad"]{}

<div attr="beli grad">Ja sam selektovan zato sto imam reč grad :D</div>
<div attr="beograd">Ja sam selektovan zato sto unutar moje reči beo(grad) ima grad :D</div>

Atribut liste vrdnosti koja sadži

Dodavanjem ~ ispred znaka =, selektujemo sve elemente sa atributom koji u svojoj listi vrednosti sadrži traženi niz karaktera.

[attr~="grad"]{}

<div attr="beli grad">Ja sam selektovan zato sto u mojoj listi atributa imam grad :D</div>
<div attr="lep beograd">Ja nisam selektovan zato što u listi nemam grad kako posebnu reč :(</div>

Atribut koji se završava sa

Dodavanjem $ ispred znaka =, selektujemo sve elemente sa atributom cija se vrednost završava traženim nizom karaktera.

[attr$="ad"]{}

<div attr="beli">Ja nisam selektovan zato što mi se vrednost atributa ne završava sa AD :(</div>
<div attr="lep beograd">Ja sam selektovan zato što mi se vrednost atribut završava sa AD :D</div>

Atribut koji počinje sa

Dodavanjem ^ ispred znaka jednako, selektujemo sve elemente sa atributom čija vrednost počinje datim nizom karaktera.

Ovo je upravo ono što nam treba za rešavanje problema.

[attr^="lep"]{}

<div attr="beli lepi">Ja nisam selektovan zato što mi se vrednost atributa ne počinje sa LEP :(</div>
<div attr="lep beograd">Ja sam selektovan zato što mi se vrednost atribut počinje sa LEP :D</div>

Pametni atribut selektor

Sada kad smo naučili džoker znakove unutar selektora atributa, možemo da rešimo prethodni primer.

Moramo da selektujemo sve linkove koji počinju sa https.

a[href^="https"]{
	color: green;
}

<a href="https://google.com">Ja sam zelen :D</a>
<a href="http://google.com">Ja nisam siguran :(</a>

Ovo je jedan od korisnih slučajeva, možemo preko pseudo selektora da dodamo ikonicu katanca na sigurne linkove i mnogo još.

Pokazaću vam još jedan koristan primer, iako ih ima mnogo.

Pre par godina sam hteo da napravim da korisnik po izgledu dugmeta zna koji tip fajla skida. Prvobitna ideja mi je bila
da se to odradi preko php-a ali sam se setio dobrog starog selektora atributa.

Evo kako je to izgledalo:

a[href$=".zip"] { color: #D766CE; }
a[href$=".pdf"] { color: #E41D24 }
a[href$=".xls"], a[href$=".xlsx"] { color: #207347 }
a[href$=".doc"], a[href$=".docx"] { color: #2A5699 }

<a href="http://primer.com/materijali/kako_biti_pametan.pdf">Crvena slova</a>
<a href="http://primer.com/materijali/lista_zelja.xlsx">Zelena slova</a>
...

Zaključak

Videli smo kako je moguće preko CSS-a rešiti neke dinamične probleme, za koje smo se ranije uvek okretali ka javaskripti ili drugima.
Ja sam ovde samo prošao kroz dva korisna primera, a ima ih mnogo, i sâm sam smišljao dosta korisnih primena.

Probajte sami i igrajte sa selektorima.