Postoji mnogo načina na koje možete odabrati elemente u CSS-u. Najosnovniji odabir je prema nazivu oznake, poput p ( ). Gotovo sve specifičnije od selektora oznaka koristi atribute - classi IDoba odabiru na tim atributima na HTML elementima. Ali classi IDnisu jedini atributi koje programeri mogu odabrati. Kao selektori možemo koristiti bilo koji atribut elementa.
Odabir atributa ima posebnu sintaksu. Evo primjera:
a(href="https://css-tricks.com") ( color: #E18728; )To je birač točnog podudaranja koji će odabrati samo veze s točnom hrefvrijednošću atributa "https://css-tricks.com".
Sedam različitih vrsta
Birači atributa prema zadanim postavkama razlikuju velika i mala slova (pogledajte podudaranje bez velikih i malih slova u nastavku) i zapisani su u zagradama ().
Postoji sedam različitih vrsta podudaranja koje možete pronaći pomoću selektora atributa, a sintaksa je različita za svako. Svaki od složenijih selektora atributa nadovezuje se na sintaksu selektora točnog podudaranja - svi počinju s imenom atributa i završavaju znakom jednakosti iza kojeg slijede vrijednosti atributa, obično u navodnicima. Ono što ide između imena atributa i znaka jednakosti je ono što čini razliku među selektorima.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Vrijednost sadrži: vrijednost atributa sadrži pojam kao jedinu vrijednost, vrijednost na popisu vrijednosti ili kao dio druge vrijednosti. Da biste koristili ovaj birač, dodajte zvjezdicu (*) prije znaka jednakosti. Na primjer, img(alt*="art")odabrat će slike s alt tekstom "apstraktna umjetnost" i "sportaš koji započinje novi sport", jer je vrijednost "umjetnost" u riječi "start".
Vrijednost se nalazi na popisu odvojenim razmakom: vrijednost je ili jedina vrijednost atributa, ili je cijela vrijednost u razmaku odvojenim skupom vrijednosti. Za razliku od selektora “contains”, ovaj selektor neće tražiti vrijednost kao fragment riječi. Da biste koristili ovaj selektor, dodajte tildu (~) prije znaka jednakosti. Na primjer, img(alt~="art")odabrat će slike s zamjenskim tekstom "apstraktna umjetnost" i "umjetnička predstava", ali ne i "sportaš koji započinje novi sport" (što bi odabrao izbornik "sadrži").
Vrijednost započinje sa: vrijednost atributa započinje odabranim pojmom. Da biste koristili ovaj selektor, dodajte znak (^) prije znaka jednakosti. Ne zaboravite, osjetljivost na velika i mala slova je bitna. Na primjer, img (alt = "art") odabrat će slike s alt tekstom "art show" i "umjetnički uzorak", ali ne i sliku s alt tekstom "Arthur Miller", jer "Arthur" započinje velikim slovom .
Vrijednost je prva na popisu odvojenim crticama: Ovaj je selektor vrlo sličan biraču "započinje s". Ovdje selektor odgovara vrijednosti koja je ili jedina vrijednost ili je prva na popisu vrijednosti odvojenih crticama. Da biste koristili ovaj selektor, dodajte znak luke (|) prije znaka jednakosti. Na primjer, li(data-years|="1900")odabrat će stavke popisa s data-yearsvrijednošću "1900-2000", ali ne i stavku popisa s data-yearsvrijednošću "1800-1900".
Vrijednost završava s: vrijednost atributa završava odabranim pojmom. Da biste koristili ovaj birač, dodajte znak dolara ($) prije znaka jednakosti. Na primjer, a(href$="pdf")odabire svaku vezu koja završava s .pdf.
Napomena o navodnicima: U nekim okolnostima možete ići bez navodnika oko vrijednosti, ali pravila za odabir bez navodnika nisu konzistentna u različitim preglednicima. Citati uvijek rade, pa ako se i dalje budete koristili njima, možete biti sigurni da će vaš selektor raditi.
Pogledajte Odabir svojstava olovke od strane CSS-trikova (@ css-trikovi) na CodePenu.
Zabavna činjenica: vrijednosti se tretiraju kao nizovi, tako da ne morate učiniti nikakvo izmišljeno izbjegavanje znakova kako bi se podudarali, kao što bi bilo kada biste koristili neobične znakove u selektoru klase ili ID-a.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Podudaranje bez velikih i malih slova
Birači atributa koji ne razlikuju mala i velika slova dio su specifikacije CSS-ove radne skupine Razina 4. Kao što je gore spomenuto, nizovi vrijednosti atributa prema zadanim su postavkama osjetljivi na velika i mala slova, ali ih se može promijeniti u neosjetljive dodavanjem dodavanjem ineposredno prije završne zagrade:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Podudaranje bez velikih i malih slova moglo bi biti vrlo korisno za ciljanje atributa koji sadrže nepredvidljiv, ljudski napisan tekst. Na primjer, pretpostavimo da ste oblikovali oblačić za govor u aplikaciji za chat i htjeli ste dodati poruku "koja maše" svim porukama s tekstom "zdravo" u nekom obliku. To biste mogli učiniti samo sa CSS-om, koristeći podudaranje bez velikih i malih slova kako biste uhvatili sve moguće varijacije:
Pogledajte CSS atribut koji ne osjetljiv na olovku, podudaranje pomoću CSS-trikova (@ css-trikovi) na CodePen-u.
Kombinirajući ih
Selektor atributa možete kombinirati s drugim selektorima, poput oznake, klase ili ID-a.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Ili čak kombinirati više selektora atributa. Ovaj primjer odabire slika s alternativnim tekstom koji uključuje riječ „osoba” kao jedini vrijednost ili vrijednost u prostoru odvojenom listu, te je srcvrijednost koja uključuje vrijednost „Lorem”:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Pogledajte kombinirane atribute olovke i odabir samo atributa pomoću CSS-trikova (@ css-trikovi) na CodePen-u.
Birači atributa u JavaScript-u i jQueryju
Birači atributa mogu se koristiti u jQueryju kao i bilo koji drugi CSS selektor. U JavaScriptu možete koristiti selektore atributa s document.querySelector()i document.querySelectorAll().
Pogledajte Odabir svojstava olovke u JS i jQuery by CSS-Tricks (@ css-tricks) na CodePenu.
Povezano
- razred
- iskaznica
Više informacija
- Mršavi na selektorima atributa
- Selektori atributa na MDN
- Selektori atributa u specifikaciji W3C CSS
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Bilo koji | Bilo koji | Bilo koji | Bilo koji | 7+ | Bilo koji | Bilo koji |