Što su selektori css atributa. Selektori CSS atributa. Podniskom u vrijednosti atributa
Postoji mnogo selektora u CSS-u. Neki od njih omogućuju odabir određenih elemenata bez dodjele klase stila ili ID-a za njih. Na primjer, selektori css atributa.
Kako odabrati element prema html atributu
Selektori atributa su oni selektori u kojima je atribut ili atribut s vrijednošću napisan u uglatim zagradama. Dat ću vam nekoliko primjera da bude jasnije:
* – odabire sve elemente koji imaju href atribut s bilo kojom vrijednošću.
unos – odabire sve elemente unosa koji imaju atribut onemogući (sva onemogućena polja).
unos – bira sva polja čiji je tip lozinka, odnosno polja za unos lozinke.
img – odabire sliku koja ima postavljen atribut src = “logo.png”.
Kao što vidite, pisanje selektora CSS atributa nije tako teško. Njihova najvažnija razlika su uglate zagrade u kojima se piše ili samo atribut ili atribut s njegovom točnom vrijednošću. No, funkcionalnost ovih selektora tu ne završava.
Napredni birači css atributa
Svi sljedeći birači razlikuju velika i mala slova.
Traži na početku retka
div – odabire sve divove koji imaju klasu stila koja počinje s "block". Tako će npr. biti odabrani sljedeći blokovi: “block-head”, “block-3”, “blocknote”. Glavno je da na početku značenja stoji ključna riječ.
Pronalaženje na kraju retka
A – odabire sve linkove čija adresa završava na .rar . Dakle, ako možete preuzeti nešto na svojoj web stranici, onda možete dodati ikonu pored svih poveznica na arhivirane datoteke.
Pronalaženje podniza posvuda u vrijednosti
span – odabrat će sve span oznake koje imaju "art" u nazivu klase bilo gdje u nazivu. Tako će npr. biti odabrani rasponi sa sljedećim klasama: party, clart, art-1.
Tražite prefikse
p – odabrat će odlomke s klasom stila koji imaju naziv koji ili točno odgovara "prvi" ili koji sadrži prefiks first- koji počinje naziv klase.
Pronalaženje riječi unutar značenja
ulazni– odabrat će sve ulazne elemente u kojima vrijednost atributa identifikatora sadrži riječ text . Razlikuje se od traženja podniza posvuda po tome što riječ mora biti uključena, a ne podniz.
Posljednje dvije opcije rijetko se koriste i malo je vjerojatno da će vam često biti korisne, ali za opći razvoj još uvijek možete znati o njima.
Za što su korisni selektori atributa?
Koristeći takve selektore, možete odabrati mnoge HTML elemente bez davanja stilskih klasa. U nekim slučajevima ovom metodom možete skratiti kod i pojednostaviti svoj rad. Na primjer, gore sam dao primjer s ikonom za arhive. Ovdje se pojavila još jedna ideja. Na primjer, na vašoj web stranici često se povezujete na jedan drugi izvor (recimo Wikipediju) i želite prikazati posebnu ikonu pored poveznica na Wikipediju, koju druge poveznice ne bi trebale imati.
Možete ga implementirati ovako:
A (css pravila)
Zapravo, postoji mnogo više načina za korištenje selektora atributa. Oni mogu donekle pojednostaviti rad tamo gdje je to potrebno. Koristite css i pretplatite se na blog kako biste saznali više o web razvoju.
Ponekad je potrebno pristupiti elementu stranice koji nema navedenu klasu ili ID, bez mogućnosti dodavanja klase ili ID-a u html. CSS Izlaz je pristup bilo kojem elementu putem atributa.
Često se takve situacije javljaju kada html kod generira vanjska skripta i vi je ne možete mijenjati. Ali u isto vrijeme potrebno ga je stilizirati ili promijeniti izgled pomoću CSS-a.
Dakle, postoji nešto poput selektora html atributi. Uz ovu pomoć, možete pristupiti bilo kojem elementu pomoću atributa u CSS-u. Atributi su isti atributi html oznaka, kao što su src, href, data-*, title, name, rel, alt itd.
U CSS-u možete odrediti selektor koji će u potpunosti ili djelomično odgovarati vrijednosti određenog atributa.
Pogledajmo neke primjere: CSS Pristup bilo kojem elementu pomoću atributa
Na primjer, ako imamo ikonu piksela koju generira PayPal kod, i dalje mobilna verzija treba ga sakriti (jer dosta smeta). Tada to možete učiniti vrlo jednostavno, u čistom CSS-u:
Ili, na primjer, trebate sakriti sve elemente s naslovom koji počinje s "Poslano". Napravimo to:
Postoji nekoliko takvih selektora:
- – svi elementi koji imaju ovaj atribut
- – svi elementi čiji je atribut točno = vrijednost
- – svi elementi čiji atribut sadrži vrijednost (mora biti cijela riječ)
- – svi elementi čiji atribut počinje vrijednošću (mora biti cijela riječ)
- – svi elementi čiji atribut počinje vrijednošću (ne može biti cijela riječ
- – svi elementi čiji atribut završava vrijednošću (ne može biti cijela riječ)
- – svi elementi čiji atribut sadrži vrijednost (može biti skup znakova, ne cijela riječ)
Usklađuje sve elemente s atributom atribut jednak vrijednost. Ako vrijednost sastoji se od nekoliko riječi s razmacima između njih, onda morate zaključiti vrijednost pod navodnicima. Ako vrijednost ne sadrži razmake - navodnici nisu potrebni.
Primjeri korištenja:
Napomena 1: Iako možete koristiti selektor za pronalaženje elemenata prema atributima klase ili id-a, ispravnije je koristiti posebne selektore prema klasi i id-u. Ovo se također odnosi na mnoge atribute u elementima obrasca, za koje postoje zasebni birači.
Napomena 2: U svim verzijama jQueryja, počevši od 1.2, upotreba simbola "@" prije atributa nije potrebna.
U akciji
Svi elementi koji imaju tooltip (atribut naslova) s tekstom "Ne miješaj se - to će te ubiti" bit će obojeni žuto s crvenim okvirima:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ div, span ( display: block; width: 50px; height: 50px; float: left; padding: 15px; margin: 5px; background-color: #eee; font -veličina: 20pt; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div title="Ne ulazi unutra, ubit će vas"~gt~ 1 ~lt~/div~gt~ ~lt~div title="I ovdje je sigurno"~gt~ 2 ~lt~/div~gt~ ~lt~span title="Opasnost! Držite se van"~gt~ 3 ~lt~/span~gt~ ~lt~script~gt~ $("") .css({"border":"3px solid red", "background-color": "#ffcc00"}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~ !}
Vlad Merzhevich
Mnoge oznake razlikuju se po učinku ovisno o tome koje atribute koriste. Na primjer, oznaka može stvoriti gumb, tekstualno polje i druge elemente obrasca samo promjenom vrijednosti atributa type. Međutim, dodavanjem stilskih pravila u selektor INPUT stil će se istovremeno primijeniti na sve elemente stvorene pomoću ove oznake. Za fleksibilnu kontrolu stila takvih elemenata, selektori atributa uvedeni su u CSS. Omogućuju vam postavljanje stila na temelju prisutnosti određenog atributa oznake ili njegove vrijednosti.
Pogledajmo nekoliko tipičnih upotreba takvih selektora.
Jednostavan birač atributa
Postavlja stil za element ako je naveden određeni atribut oznake. Njegovo značenje u ovom slučaju nije važno. Sintaksa za korištenje takvog selektora je sljedeća.
[atribut] (Opis pravila stila)
Selektor[atribut] (Opis pravila stila)
Stil se primjenjuje na one oznake unutar kojih je dodan navedeni atribut. Razmak između naziva selektora i uglate zagrade nije dozvoljeno.
Primjer 13.1 prikazuje promjenu stila oznake , u slučaju da mu se doda atribut title.
Primjer 13.1. Vrsta elementa ovisno o atributu
HTML5 CSS 2.1 IE Cr Op Sa Fx
Nastavljajući s poznatim Murphyjevim zakonom, koji kaže: Ako se nevolja može dogoditi, sigurno će se dogoditi.
, možemo uvesti naše opažanje: Nakon što se web stranica ispravno prikaže u jednom pregledniku, ispada da se ne prikazuje ispravno u drugom
.
Rezultat primjera prikazan je na sl. 13.1.
Riža. 13.1. Promjena stila elementa ovisno o primjeni atributa naslova
U u ovom primjeru Boja teksta unutar spremnika se mijenja kada mu se doda naslov. Imajte na umu da nema potrebe ponavljati svojstva stila za Q selektor, budući da su naslijeđena od Q selektora.
Atribut s vrijednošću
Postavlja stil za element ako je navedena određena vrijednost za određeni atribut. Sintaksa aplikacije je sljedeća.
[attribute="value"] (Opis pravila stila)
Selektor[attribute="value"] ( Opis pravila stila )
U prvom slučaju, stil se primjenjuje na sve oznake koje sadrže navedenu vrijednost. A u drugom - samo određenim selektorima.
Primjer 13.2 pokazuje kako promijeniti stil veze ako oznaka sadrži ciljni atribut s vrijednošću _blank. U tom slučaju poveznica će se otvoriti u novom prozoru i da bismo to prikazali, koristeći stilove dodajemo malu sliku ispred teksta veze.
Primjer 13.2. Stil za otvaranje poveznica u novom prozoru
HTML5 CSS 2.1 IE Cr Op Sa Fx
Rezultat primjera prikazan je u nastavku (slika 13.2).
Riža. 13.2. Promijenite stil elementa na temelju ciljne vrijednosti
U ovom primjeru, slika je dodana na vezu pomoću svojstva pozadine. Njegova je funkcija stvaranje pozadinske slike koja se ponavlja, no ponavljanje pozadine može se poništiti pomoću vrijednosti bez ponavljanja, što će u konačnici rezultirati jednom slikom.
Vrijednost atributa počinje određenim tekstom
Postavlja stil za element ako vrijednost atributa oznake počinje navedenim tekstom. Sintaksa aplikacije je sljedeća.
[atribut^="vrijednost"] (Opis pravila stila)
Selektor[atribut^="vrijednost"] ( Opis pravila stila )
U prvom slučaju, stil se primjenjuje na sve elemente čije vrijednosti atributa počinju navedenim tekstom. A u drugom - samo određenim selektorima. Korištenje navodnika nije obavezno, ali samo ako vrijednost sadrži latinična slova i nema razmaka.
Pretpostavimo da vaše web mjesto mora razdvojiti stil običnih i vanjskih poveznica—veza koje vode do drugih stranica. Da ne bi ušao u tag nova klasa, upotrijebimo selektore atributa. Za vanjske poveznice karakteristično je dodavanje protokola adresi, na primjer, HTTP protokol se koristi za pristup hipertekstualnim dokumentima. Stoga vanjske veze počinju ključnom riječi http://, a mi je dodajemo selektoru A, kao što je prikazano u primjeru 13.3.
HTML5 CSS 2.1 IE Cr Op Sa Fx
Rezultat primjera prikazan je u nastavku (slika 13.3).
Riža. 13.3. Promjena stila za vanjske poveznice
Vrijednost atributa završava određenim tekstom
Postavlja stil za element ako vrijednost atributa završava navedenim tekstom. Sintaksa aplikacije je sljedeća.
[attribute$="value"] ( Opis pravila stila )
Selektor[attribute$="value"] ( Opis pravila stila )
U prvom slučaju, stil se primjenjuje na sve elemente čija vrijednost atributa završava navedenim tekstom. A u drugom - samo određenim selektorima.
Na ovaj način možete automatski razdvojiti stil za poveznice na stranice ru domene i poveznice na stranice drugih domena poput com, kao što je prikazano u primjeru 13.4.
Primjer 13.4. Stil za različite domene
HTML5 CSS 2.1 IE Cr Op Sa Fx
Yandex.Com | Yandex.Ru
Ovaj primjer sadrži dvije poveznice koje vode na različite domene - com i ru. Istodobno, svaka takva veza ima vlastitu pozadinsku sliku dodanu pomoću stilova (Sl. 13.4). Svojstva stila primjenjivat će se samo na veze čiji href atribut završava na “.ru” ili “.com”. Imajte na umu da ćemo dodavanjem kose crte (http://www.yandex.ru/) ili adrese stranice (http://www.yandex.ru/fun.html) nazivu domene promijeniti završetak i stil se više neće primjenjivati. U ovom slučaju, bolje je koristiti selektor u kojem se navedeni tekst pojavljuje bilo gdje u vrijednosti atributa.
Vrijednost atributa sadrži navedeni tekst
Postoje opcije kada se stil treba primijeniti na oznaku s određenim atributom, a neki tekst je dio njegove vrijednosti. Međutim, ne zna se točno gdje je u značenju ovaj tekst uvršten - na početku, sredini ili kraju. U tom slučaju trebali biste koristiti ovu sintaksu.
[attribute*="value"] (Opis pravila stila)
Selektor[atribut*="vrijednost"] ( Opis pravila stila )
Primjer 13.5 pokazuje kako promijeniti stil veza koje imaju riječ "htmlbook" u svom href atributu.
Primjer 13.5. Stil za različite stranice
HTML5 CSS 2.1 IE Cr Op Sa Fx
Korak po korak | Grafika za web
Rezultat ovog primjera prikazan je na sl. 13.5.
Riža. 13.5. Promjena stila za poveznice koje sadrže "htmlbook" u adresi
Jedna od nekoliko vrijednosti atributa
Neke vrijednosti atributa mogu biti odvojene razmacima, kao što su nazivi klasa. Za postavljanje stila kada je potrebna vrijednost prisutna na popisu, koristite sljedeću sintaksu.
[atribut~="vrijednost"] (Opis pravila stila)
Selektor[atribut~="vrijednost"] ( Opis pravila stila )
Stil se primjenjuje ako atribut ima određenu vrijednost ili je dio popisa vrijednosti odvojenih razmakom (Primjer 13.6).
Primjer 13.6. Stil ovisno o nazivu klase
HTML5 CSS 2.1 IE Cr Op Sa 5 Fx
Naslov
U ovom primjeru, zelena boja teksta primjenjuje se na selektor H3 ako je naziv klase sloja postavljen na block . Imajte na umu da se sličan rezultat može dobiti ako koristite *= konstrukciju umjesto ~=.
Crtica u vrijednosti atributa
Znak crtica (-) dopušten je u imenima identifikatora i klasa, što vam omogućuje stvaranje smislenih vrijednosti za atribute id-a i klase. Da biste promijenili stil elemenata koji koriste crticu u svojoj vrijednosti, koristite sljedeću sintaksu.
[atribut|="vrijednost"] (Opis pravila stila)
Selektor[atribut|="vrijednost"] ( Opis pravila stila )
Stil se primjenjuje na elemente čiji atribut počinje navedenom vrijednošću ili fragmentom vrijednosti iza kojeg slijedi crtica (Primjer 13.7).
Primjer 13.7. Crtice u vrijednostima
HTML5 CSS 2.1 IE Cr Op Sa Fx
U ovom primjeru, naziv klase je postavljen na block-menu-therm, tako da stilovi koriste konstrukciju |="block" budući da vrijednost počinje ovom riječju i u vrijednosti postoje crtice.
Sve ove metode mogu se međusobno kombinirati, definirajući stil za elemente koji sadrže dva ili više atributa. U takvim slučajevima uglate zagrade su uzastopne.
[attribute1="value1"][attribute2="value2"] (Opis pravila stila)
Birač[atribut1="vrijednost1"][atribut2="vrijednost2"] ( Opis pravila stila)
Pitanja za provjeru
1. Morate postaviti boju pozadine tekstualnog polja. Koji je stil prikladan za ovu svrhu?
- ULAZ ( pozadina: #acdacc; )
- ULAZ ( pozadina: #acdacc; )
- ULAZ ( pozadina: #acdacc; )
- ULAZ ( pozadina: #acdacc; )
- ULAZ ( pozadina: #acdacc; )
2. Koji stil treba koristiti za promjenu boje teksta samo drugog odlomka?
Prvi paragraf
Drugi paragraf
Treći paragraf
- P (boja: crvena;)
- P (boja: crvena;)
- P (boja: crvena;)
- P (boja: crvena;)
- P (boja: crvena;)
3. Na koji element će se primijeniti sljedeći stil?
( pozadina: #666; )
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Odgovori
1. ULAZ ( pozadina: #acdacc; )
2. P (boja: crvena;)
3.
Gotovo svi dizajneri izgleda znaju za postojanje selektora CSS atributa i barem su se jednom susreli s konstrukcijama iz kategorije unosa u svom kodu, ali samo nekolicina odabranih zna da zapravo postoji 7 njihovih varijanti, od kojih svaka otvara prilično širok prostor mogućnosti odabira oznaka iz koda naše stranice.
Opis birača CSS atributa
primarni cilj– izbor oznaka iz html koda stranice prema određenom atributu, skupini atributa ili njihovoj vrijednosti.
Sintaksa– uglate zagrade koje sadrže naziv atributa.
Klasifikacija i uporaba selektora atributa
Po prisutnosti atributa
[naslov] ( tekst- dekoracija: podvučeno; )
Omogućuje odabir svih elemenata koji imaju atribut s određenim nazivom. U našem će primjeru sve oznake s naslovom postati podcrtane.
Po točnoj vrijednosti atributa
input[ type= "submit" ] (boja pozadine: zelena; )
Možda najčešći tip ovog atributa. Određuje točno podudaranje. Bit će odabrani samo oni unosi čiji je atribut vrste postavljen na slanje.
Po djelomičnoj vrijednosti atributa
p[ klasa ~= "korisno" ] ( boja: crvena; )
Omogućuje odabir elemenata čije navedene vrijednosti uključuju naše. Za bolje razumijevanje, objasnit ću na primjeru: svi ps-ovi koji imaju korisne među zadanim klasama će potpasti pod ovaj selektor. (“korisni supertekst” će pogoditi, “korisni” će pogoditi, “supertekst” neće pogoditi).
Selektor klase je u biti poseban slučaj ovog selektora atributa.
Po određenim vrijednostima atributa
[ lang|= "en" ] ( font-style: italic; )
Odabir po atributu čija je vrijednost jednaka vrijednosti selektora ili sadrži tu vrijednost iza koje slijedi crtica.
Radi boljeg razumijevanja, reći ću da će u primjeru biti odabrani elementi s lang="en", lang="en-us", lang="en-au", ali oni s lang="ru", lang= "engleski" neće.
Prema početku vrijednosti atributa
[ alt^= "pony" ] ( margin- bottom: 20px; )
Odabrat će atribute čija vrijednost počinje onom koju smo postavili. Objašnjenja: alt=”ponyLand”, alt=”pony can fly”, alt=”pony” – bit će odabrano, alt=”I want pony” – neće biti odabrano.
Na kraju vrijednosti atributa
Općenito, princip rada je sličan prethodnom atributu, ali ovaj put bi vrijednost trebala biti na kraju atributa.
img[ src$= ".png" ] (širina: 150px; )
Primjer će odabrati sve slike koje referenciraju .png datoteke.
Podniskom u vrijednosti atributa
Logičan nakon prethodna dva bio bi selektor koji odabire elemente u kojima se pojavljuje vrijednost koja nas zanima, bez obzira na to gdje se nalazi unutar atributa.
a[ href*= "web stranica" ] (veličina fonta: 120%; )
Bit će odabrani svi elementi koji uključuju podniz koji nas zanima..ru” više nije prisutan. od 5)