CSS selektor HTML parametra
Sada ćemo obraditi grupu selektora koji se odnose na elemente koji imaju određeni parametar ili čak one koji imaju parametar sa određenom vrednošću.
| [param] | Selektor po parametru - elementi sa parametrom param |
| [param="vrednost"] | Selektor po vrednosti parametra - elementi kojima parametar param ima zadatu vrednost |
| [param^="početak"] | Selektor po početku vrednosti parametra - elementi čija vrednost param počinje sa početak |
| [param$="kraj"] | Selektor po završetku vrednosti parametra - elementi čija se vrednost param završava sa kraj |
| [param*="deo"] | Selektor po delu vrednosti parametra - elementi koji negde unutar vrednosti param imaju deo |
| [param~="vrednost"] | Selektor po vrednosti parametra iz liste - elementi kod kojih je jedna od vrednosti iz param liste, zadata vrednost (lista je odvojena razmacima) |
| [param|="vrednost"] | Selektor po vrednosti parametra praćenog crticom - elementi kod kojih je param jednak vrednost ili počinje sa vrednost- |
Selektor parametra
Ovaj selektor se odnosi na one HTML elemente koji u svojoj oznaci prosto imaju zadati parametar. Cela ova grupa selektora zadaje se u uglastim zagradama, kao [param].
[param] {...}
<elem>...</elem>
<elem param="x">...</elem>
<nesto param="y">...</nesto>
<elem pp="x">...</elem>
Ovako naveden selektor se odnosi na svaki element koji ima zadati parametar. Ne zaboravite da se [] selektor može dodati na HTML selektor ili selektor klase.
oznaka[param] {...}
<elem>...</elem>
<oznaka param="x">...</oznaka>
<elem param="y">...</elem>
<elem pp="x">...</elem>
Selektori vrednosti parametra
Sada tek počinju zanimljive stvari. Možemo još bolje definisati selektor paramtera, tako što odredimo i vrednost koju parametar mora da ima da bi HTML element bio formatiran CSS pravilom. U osnovnoj varijanti, zadaje se kao [param=vrednost].
[param="x"] {...}
<elem>...</elem>
<elem param="x">...</elem>
<elem param="y">...</elem>
<elem pp="x">...</elem>
Primer - Selektori HTML parametra
Recimo da smo podesili formatiranje linkova i zadali da se svi linkovi boje ljubičasto (magenta). Međutim, želimo da promenimo boju linkova koji se otvaraju u novom prozoru, tj. imaju zadat parametar target sa vrednošću _blank.
<style>
a {
color: magenta;
text-decoration: none;
font-weight: bold;
}
a[target="_blank"] {
color: red;
}
</style>
<ul>
<li>Link u istom prozoru <a href="HTTP://google.com">google.com</a></li>
<li>Link u novom prozoru <a href="http://wikipedia.org" target="_blank">wikipedia.org</a></li>
<li>Link u istom prozoru <a href="http://webnstudy.com">webnstudy.com</a></li>
</ul>
Znači napravili smo selektor a[target="_blank"], što znači svaki link koji ima parametar target sa vrednošću "_blank". Rezultat bi izgledao ovako:
Osim navedenog, postoje još tri posebna varijante ovog selektora koji se odnose samo na deo tražene vrednosti:
- [param^=vrednost] - tražena vrednost se nalazi na početku vrednosti parametra - traži se prefiks
- [param$=vrednost] - tražena vrednost se nalazi na kraju vrednosti parametra - traži se sufiks
- [param*=vrednost] - tražena vrednost se može naći makar jednom bilo gde unutar vrednosti parametra - traži se podstring
[param^="x"] {...}
<elem param="xyy">...</elem>
<elem param="yxy">...</elem>
<elem param="yyx">...</elem>
[param$="x"] {...}
<elem param="xyy">...</elem>
<elem param="yxy">...</elem>
<elem param="yyx">...</elem>
[param*="x"] {...}
<elem param="xyy">...</elem>
<elem param="yxy">...</elem>
<elem param="yyx">...</elem>
Velika i mala slova
U normalnim okolnostima, zadata vrednost mora da se poklopi po velikim i malim slovima. Međutim, ponekad moramo da zahtevamo poklapanje, ali da bude nezavisno od velikih i malih slova. Da bismo postigli case insensitive uparivanje, potrebno je da neposredno pre zatvaranja uglaste zagrade ubacimo modifikator "i" (bez navodnika). Dakle:
[param="x"] {...}
<elem param="X">...</elem>
<elem param="x">...</elem>
Dok je:
[param="x" i] {...}
<elem param="X">...</elem>
<elem param="x">...</elem>
Ovaj modifikator možemo koristiti u svakom selektoru koji "traži" vrednost ili deo vrednosti parametra.
Primer - Selektori po delu vrednosti parametra
Drugi primer se nadovezuje na prvi. Opet formatiramo linkove, ali ovaj put želimo da drugačije obojimo one koji nas vode na drugi sajt. Kao što znamo URL takvog linka počinje sa "http".
<style>
a {
color: magenta;
text-decoration: none;
font-weight: bold;
}
a[href^="http" i] {
color: red;
}
</style>
<ul>
<li>Link na drugi sajt <a href="HTTP://google.com">google.com</a></li>
<li>Link na drugi sajt <a href="http://wikipedia.org" target="_blank">wikipedia.org</a></li>
<li>Link na isti sajt <a href="tema.php?id=css">tema.php?id=css</a></li>
</ul>
Kreiramo selektor a[href^="http" i] što se odnosi na svaki link čiji href parametar počinje sa "http". Pošto vidimo da URL kod prvog linka počinje sa "HTTP" ispisanim velikim slovima, dobro je što smo dodali i modifikator "i", zahvaljujući kome se "računaju" i velika i mala slova. Rezultat bi izgledao ovako:
Specifični selektori vrednosti parametra
Kao da sve ovo nije dovoljno, postoji i mogućnost da se putem selektora traži HTML element sa parametrom koji ima traženu vrednost kao jednu od vrednosti navedenih u listi. Znači ako imamo HTML elemente koji imaju parametar čija vrednost je lista (elementi liste su odvojeni razmacima), možemo napraviti selektor koji "traži" jednu od vrednosti iz te liste.
Selektor će "raditi" i ako je navedena vrednost jedina u listi. Ovaj selektor se navodi kao [param~=vrednost].
[param~="x"] {...}
<elem param="z-x">...</elem>
<elem param="x">...</elem>
<elem param="z x y">...</elem>
U određenim situacijama ćemo tražiti vrednost ili prefiks vrednosti koji je praćen crticom. Ruku na srce ovo se retko upotrebljava - na primer za selektovanje na osnovu jezika, pošto specifično jezici imaju upravo tako zadate vrednosti ("en-us", "en-gb"...). Ovaj selektor se navodi kao [param|=vrednost]
[param|="x"] {...}
<elem param="y-x">...</elem>
<elem param="xy">...</elem>
<elem param="x-y">...</elem>
<elem param="x">...</elem>
Primer - Specifični selektori vrednosti parametra
Prvo ćemo ispitati kako funkcioniše uparivanje zadate vrednosti sa vrednošću iz liste. Formatiraćemo one elemente kod kojih se pojavljuje vrednost "prog" u listi vrednosti parametra data-some (možemo ubacivati koje hoćemo parametre u HTML elemente, sve dok počinju sa "data-").
<style>
[data-some~="prog"] {
color: red;
}
</style>
<div data-some="prog">Samo tražena vrednost</div>
<div data-some="web prog front">Jedna od vrednosti u listi</div>
<div data-some="web programiranje">Deo jedne od vrednosti</div>
Da bismo to postigli, kreiramo selektor [data-some~="prog"], što se tumači kao svaki element koji ima parametar data-some kome je vrednost jednaka "prog" ili je jedna od vrednosti iz liste jednaka "prog". Tako dobijamo:
Vidimo da CSS nije primenjen na poslednji elemenat - "prog" se nalazi u vrednosti parametra kao deo teksta, ali nije zasebna vrednost u listi.
U sledećem primeru pokušavamo da formatiramo one elemente za koje parametar data-lang ukazuje da su na srpskom jeziku. Ovde koristimo standardne kodove za jezike, s tim što će se negde naći samo "sr", a negde će biti dodata i odrednica pisma poput "Cyrl" i "Latn". Dodatne jezičke odrednice se odvajaju crticom i u ovom slučaju želimo da svaka "srpska" varijanta bude uračunata.
<style>
[data-lang|="sr"] {
color: blue;
}
</style>
<div data-lang="sr">Srpski tekst.</div>
<div data-lang="sr-Cyrl">Српска ћирилица.</div>
<div data-lang="hr-Latn sr-Latn">Hrvatski ili srpski latinični tekst.</div>
Ako upotrebimo selektor [data-lang|="sr"], on će se odnositi na svaki elemenat koji faktički ima vrednost "sr" ili počinje sa "sr-". Evo kako izgleda rezultat:
Kao što vidimo, element koji negde unutar vrednosti krije "sr-" neće biti uzet u obzir.
- Mozilla Developer Network, Attribute selectors
- P. Gasston (2011): The Book of CSS3, No Starch Press, San Francisco
- S. Greig (2013): CSS3 Pushing the Limits, Wiley, Chichester