Css atributi. Prilagođeni selektori u CSS-u

Selektori prema atributima oznake

Selektori atributa su posebni selektori koji vezuju stil za element na osnovu toga da li sadrži određeni atribut ili ima određenu vrijednost. Postoji nekoliko opcija za korištenje takvih selektora.

1. Jednostavan selektor atributa

Izgleda kao:

<селектор>[<имя атрибута тега>] { <стиль> }

I veže stil za one elemente unutar kojih je dodan navedeni atribut. Na primjer:

jaka (
boja:crvena;
}
...

Automobile ovo je mehanički motor bez traga vozilo">drumsko vozilo sa najmanje 4 točka.

rezultat:

Na slici možete vidjeti da je css pravilo (crvena boja teksta) primijenjeno na element jaka, kojem se dodaje atribut naslov.

2. Selektor atributa sa vrijednošću

Sintaksa za ovaj selektor je sljedeća:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

Vezuje stil na elemente čije oznake imaju atribut sa navedenim ime I značenje. primjer:

a(
boja:crvena;
font-size:150%;
}
...
.ru" target="_blank">Link u novom prozoru

rezultat:

Kao što vidite, oba elementa tipa hiperveze imaju atribut cilj, ali css pravilo koje uvećava tekst linka za jedan i pol puta i mijenja njegovu boju u crvenu se primjenjuje na oznaku čiji atribut cilj ima značenje "_blank".

3. Jedna od nekoliko vrijednosti atributa

Neke vrijednosti atributa mogu biti odvojene razmacima, kao što su imena klasa. Da biste postavili pravilo stila kada je tražena vrijednost prisutna na listi vrijednosti atributa, koristite sljedeći selektor:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Stil se primjenjuje ako atribut ima potrebnu vrijednost ili je dio liste vrijednosti razdvojene razmakom. Na primjer:

{
boja:crvena;
font-size:150%;
}
...

Naš telefon: 777-77-77

Naša adresa: Moskva st. Sovetskaya 5

Dobićete sledeći rezultat:

Pravilo se primjenjuje na element čije vrijednosti atributa uključuju: klasa postoji značenje tel.

4. Crtica u vrijednosti atributa

Crtica je dozvoljena u vrijednostima identifikatora i klase. Da biste stil povezali sa elementima čije vrijednosti atributa mogu sadržavati crticu, možete koristiti sljedeću konstrukciju:

[atribut|="value"] ( stil)
Selektor[atribut|="vrijednost"] ( stil)

Stil se primjenjuje na one elemente čija vrijednost atributa počinje navedenom vrijednošću praćenom crticom. Na primjer:

{
boja:crvena;
font-size:150%;
}
...

• Stav 1


• Tačka 2


• Tačka 3


• Tačka 4

rezultat:

U primjeru, pravilo stila se primjenjuje samo na one elemente liste čije ime klase počinje vrijednošću "meni- ".

5. Vrijednost atributa počinje određenim tekstom

Ovaj selektor postavlja stil za element ako vrijednost atributa oznake počinje određenom vrijednošću. Mogu postojati dvije opcije:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

U prvom slučaju stil primjenjuje se na sve elemente čije oznake imaju atribut sa navedenim ime i vrijednost koja počinje sa navedenim podnizovi. U drugom slučaju, ista stvar, samo za određene elemente navedene u glavni selektor. primjer:

a(
boja:zelena;
font-weight:bold;
}
...

rezultat:

Primjer pokazuje kako drugačije prikazati vanjske i interne veze. Vanjske veze uvijek počinju nizom "http://". Stoga u selektoru označavamo da će stil biti primijenjen samo na veze koje imaju atribut href počinje sa značenjem http://.

6. Vrijednost atributa završava određenim tekstom

Veže stil za elemente čija vrijednost atributa završava navedenim tekstom. Ima sljedeću sintaksu:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

U prvom slučaju stil odnosi se na sve elemente koji imaju atribut sa navedenim ime i ima značenje koje se završava sa navedenim podniz. U drugom slučaju ista stvar, samo do naznačenog selektori. Na taj način, na primjer, različiti grafički formati slika mogu biti različito prikazani. Na primjer:

IMG (
granica: 5px puna crvena;
}
...

GIF slika

Format slike png

rezultat:

U primjeru, sve slike s gif ekstenzijom će biti prikazane s crvenim rubom debljine pet piksela.

7. Vrijednost atributa sadrži navedeni niz

Ovaj selektor vezuje stil za oznake čija vrijednost atributa sadrži određeni tekst. sintaksa:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Stil vezuje se za elemente koji imaju atribut sa navedenim imenom i njegova vrijednost sadrži navedeno podniz. Na primjer:

IMG (
granica: 5px puna crvena;
}
...

Slika iz foldera galerije

Slika iz drugog foldera

rezultat:

U primjeru, stil se primjenjuje na slike koje se učitavaju iz mape "galerija".

To je sve o selektorima atributa. Sve gore navedene metode mogu se međusobno kombinirati:

Selektor[attribute1="value1"][attribute2="value2"] ( stil )

Uz to, da vas podsjetim na posebne CSS selektore:

• pomoću simbola se formiraju “+” i “~”;
• simbol ">" povezuje css stilove za podružnice oznake;
• simbol<пробел>generira selektore konteksta.

U budućim člancima, takođe ćemo se osvrnuti na pseudoelemente i pseudo-klase, koje pružaju moćne alate za upravljanje stilovima.

To je sve, vidimo se ponovo.

Vlad Merzhevich

Mnoge oznake se razlikuju po svom efektu ovisno o tome koje atribute koriste. Na primjer, oznaka može kreirati dugme, tekstualno polje i druge elemente obrasca samo promjenom vrijednosti atributa tipa. Međutim, dodavanje stilskih pravila u INPUT selektor će primijeniti stil istovremeno na sve elemente kreirane pomoću ove oznake. Za fleksibilnu kontrolu stila takvih elemenata, selektori atributa su uvedeni u CSS. Oni vam omogućavaju da postavite stil na osnovu prisustva određenog atributa oznake ili njegove vrijednosti.

Pogledajmo nekoliko tipičnih upotreba takvih selektora.

Jednostavan selektor atributa

Postavlja stil za element ako je specificiran 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 stilskog pravila)
Selektor[atribut] (Opis stilskih pravila)

Stil se primjenjuje na one oznake unutar kojih je dodan navedeni atribut. Razmak između imena selektora i uglastih zagrada nije dozvoljen.

Primjer 13.1 pokazuje promjenu stila oznake , u slučaju da mu se doda atribut title.

Primjer 13.1. Vrsta elementa u zavisnosti od njegovog atributa

HTML5 CSS 2.1 IE Cr Op Sa Fx

Nastavljamo sa čuvenim Marfijevim zakonom, koji kaže: Ako se problem može dogoditi, sigurno će se dogoditi., možemo uvesti naše zapažanje: Nakon što se web stranica ispravno prikaže u jednom pretraživaču, ispada da se ne prikazuje ispravno u drugom.

Rezultat primjera prikazan je na sl. 13.1.

Rice. 13.1. Promjena stila elementa ovisno o primjeni atributa title

U ovom primjeru mijenja se boja teksta unutar kontejnera kada mu se doda naslov. Imajte na umu da nema potrebe ponavljati svojstva stila za Q selektor, budući da su naslijeđeni 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 stilskih pravila)
Selector[attribute="value"] ( Opis stilskih pravila)

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 je oznaka sadrži ciljni atribut s vrijednošću _blank. U ovom slučaju, link će se otvoriti u novom prozoru i da bismo to pokazali, koristeći stilove dodajemo malu sliku ispred teksta veze.

Pretpostavimo da vaša stranica treba da odvoji stil redovnih i vanjskih veza – veza koje vode na druge stranice. Da ne bi ušli u tag nova klasa, koristimo selektore atributa. Vanjske veze karakterizira dodavanje protokola adresi, na primjer, HTTP protokol se koristi za pristup hipertekstualnim dokumentima. Prema tome, eksterne veze počinju sa http:// ključnom riječi, a mi je dodajemo u A selektor, kao što je prikazano u primjeru 13.3.

IN u ovom primjeru sadrži dvije veze koje vode do različitih domena - com i ru. Istovremeno, svaka takva veza ima svoju pozadinu koja se dodaje pomoću stilova (slika 13.4). Svojstva stila će se primijeniti samo na linkove čiji atribut href 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) imenu 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 stil treba primijeniti na oznaku s određenim atributom, a neki tekst je dio njegove vrijednosti. Međutim, ne zna se tačno gde je u značenju ovaj tekst uključen - na početku, u sredini ili na kraju. U tom slučaju, trebali biste koristiti ovu sintaksu.

[attribute*="value"] (Opis stilskih pravila)
Selector[attribute*="value"] ( Opis stilskih pravila)

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.

Rice. 13.5. Promjena stila za veze koje sadrže “htmlbook” u adresi

Jedna od nekoliko vrijednosti atributa

Neke vrijednosti atributa mogu biti odvojene razmacima, kao što su imena klasa. Da biste postavili stil kada je tražena vrijednost prisutna na listi, koristite sljedeću sintaksu.

[attribute~="value"] (Opis stilskih pravila)
Selector[attribute~="value"] ( Opis stilskih pravila)

Stil se primjenjuje ako atribut ima specificirana vrijednost ili je dio liste vrijednosti razdvojene razmakom (Primjer 13.6).

Primjer 13.6. Stil u zavisnosti od naziva klase

HTML5 CSS 2.1 IE Cr Op Sa 5 Fx

U ovom primjeru, zelena boja teksta se primjenjuje na H3 selektor 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 crtice (-) je dozvoljen u nazivima identifikatora i klasa, što vam omogućava da kreirate smislene vrijednosti za id i atribute klase. Da biste promijenili stil elemenata koji koriste crticu u svojoj vrijednosti, koristite sljedeću sintaksu.

[attribute|="value"] (Opis stilskih pravila)
Selektor[attribute|="value"] ( Opis stilskih pravila)

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, ime klase je postavljeno na block-menu-therm , tako da stilovi koriste konstrukciju |="block" pošto vrijednost počinje ovom riječju i postoje crtice u vrijednosti.

Sve ove metode mogu se kombinirati jedna s drugom, definirajući stil za elemente koji sadrže dva ili više atributa. U takvim slučajevima, uglaste zagrade su uzastopne.

[attribute1="value1"][attribute2="value2"] (Opis stilskih pravila)
Selektor[attribute1="value1"][attribute2="value2"] (Opis pravila stila)

Pitanja za provjeru

1. Morate postaviti boju pozadine tekstualnog polja. Koji stil je pogodan za ovu svrhu?

1. INPUT (pozadina: #acdacc; )
2. INPUT (pozadina: #acdacc; )
3. INPUT (pozadina: #acdacc; )
4. INPUT (pozadina: #acdacc; )
5. INPUT (pozadina: #acdacc; )

2. Koji stil treba koristiti za promjenu boje teksta samo drugog pasusa?

Prvi paragraf

Drugi paragraf

Treći paragraf

1. P ( boja: crvena; )
2. P ( boja: crvena; )
3. P ( boja: crvena; )
4. P ( boja: crvena; )
5. P ( boja: crvena; )

3. Na koji element će se primijeniti sljedeći stil?

(pozadina: #666; )

Lorem ipsum dolor sit amet

1. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

2. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Odgovori

1. INPUT (pozadina: #acdacc; )

2. P ( boja: crvena; )

3.

Uprkos njihovoj fleksibilnosti i raznolikosti, selektori atributa u CSS-u se koriste prilično rijetko. Iako njihova upotreba pruža velike mogućnosti za web programere. Oni vam omogućavaju da promijenite svojstva elementa sa datim atributom i, osim toga, sa određenom vrijednošću. Ovisno o rezultatu koji želite postići, različite sintakse se koriste za selektore atributa.

Jednostavan selektor atributa

Koristi se za postavljanje stila atributa ako vrijednost atributa ne igra nikakvu ulogu. I ima sljedeću sintaksu:

[atribut] (svojstvo1: vrijednost; ...) selektor [atribut] (svojstvo1: vrijednost; ...)

Kao primjer, pokušajte napisati ovu liniju u svoj stilski list:

P ( boja: crvena; /* Boja teksta */ )

Boja teksta će se promijeniti samo ako je atribut align text primijenjen na oznaku p

Atribut s vrijednošću

Primjenjuje se kada je specificiran atribut sa određenom vrijednošću. Sintaksa aplikacije je sljedeća:

[attribute="value"] ( property1: vrijednost; ... ) selektor [attribute="value"] ( property1: vrijednost; ... )

U praksi se, na primjer, može primijeniti sljedeće:

P ( boja: crvena; /* Boja teksta */ ) p ( boja: tamnoplava; /* Boja teksta */ )

Vrijednost atributa počinje određenim tekstom

Ova metoda postavljanja stila može se primijeniti, na primjer, na veze ili druge elemente čije vrijednosti atributa počinju određenim imenima. Na primjer:

Img ( margina:15px auto; )

Sintaksa za ovu metodu postavljanja stilova je sljedeća:

[attribute^="value"] ( property1: vrijednost; ... ) selektor [attribute^="value"] ( property1: vrijednost; ... )

Vrijednost atributa završava se određenim tekstom

Koristi se prilično rijetko. Obično se ovaj način postavljanja stilova koristi kada se završavaju nazivi bilo koje veze ili rezolucije datoteke. Opća sintaksa je:

[attribute$="value"] ( property1: vrijednost; ... ) selektor [attribute$="value"] ( property1: vrijednost; ... )

Ovu metodu možete koristiti na sljedeći način:

Img (/* Ako se rezolucija slikovne datoteke završava na .png */ margin:10px auto; ) a ( /* Ako se veza završava na .com */ padding-right: 25px; )

Vrijednost atributa sadrži navedeni tekst

Postoje slučajevi kada trebate postaviti stilove za određene veze koje imaju isti tekst u nazivu vrijednosti atributa. Sintaksa pisanja je sljedeća:

[attribute*="value"] ( property1: vrijednost; ... ) selektor [attribute*="value"] ( property1: vrijednost; ... )

Kao primjer, koristio sam stil da promijenim izgled veza gdje se pojavljuje naziv “sdcvoy”:

Sama kreirana web stranica | HTML jezik | Poznati pretraživač

Kao rezultat, dobio sam sljedeće:

Jedna od nekoliko vrijednosti atributa

Često prilikom navođenja atributa postoji lista nekoliko vrijednosti odvojenih razmakom. Kao što ste vjerovatno već pretpostavili, možete postaviti svojstva stila za jednu vrijednost. Sintaksa za ovu metodu je sljedeća:

[attribute~="value"] ( property1: vrijednost; ... ) selektor [attribute~="value"] ( property1: vrijednost; ... )

Predlažem da pogledate mali primjer:

Crveni udarac

Rezultat bi trebao izgledati ovako:

Crtica u vrijednosti atributa

Vrlo često se naziv vrijednosti atributa sastoji od nekoliko riječi odvojenih crticom. I dešava se da se prva riječ u naslovu ponavlja. Dakle, za takve atribute možete zasebno postaviti stilove. Ovo se radi vrlo jednostavno. Na primjer ovako:

Div a ( boja:zelena; /* Boja veze */ padding: 15px; /* Margine */ )

Opća sintaksa za upotrebu je:

[attribute|="value"] ( property1: vrijednost; ... ) selektor [attribute|="value"] ( property1: vrijednost; ... )

Možda se ne sjećate upotrebe selektora atributa, kao što sam ranije rekao da se koriste prilično rijetko, ali su vrlo fleksibilan alat u web razvoju. Za sada predlažem da pređemo na sledeću temu.

CSS je moćan alat za web razvoj. Omogućava nam da oživimo gotovo sve naše ideje i ideje.

Važna prednost CSS-a je mogućnost primjene stilova na sve elemente istog tipa na stranici. Da biste efikasno koristili ovu funkciju, morate dobro razumjeti CSS selektori. Selektor je upravo ono na šta se primjenjuje pravilo.

Postoji nekoliko tipova CSS selektora. Idemo dalje na razmatranje ovih vrsta i primjera njihove upotrebe.

Univerzalni selektor

Univerzalni selektor specificira stil svih elemenata dokumenta. Označeno zvjezdicom (*). Na primjer, ovo specificira da će svi elementi biti crveni:

* (boja: crvena;)

Selektori elemenata

Kada pišete stilove za HTML dokument, elementi su HTML oznake (h1, p, img, a, body...). Na primjer:

H1 ( font-family:Verdana; font-size:12px; boja:#666; )

IN u ovom slučaju svi naslovi prvog nivoa u dokumentu će biti u fontu Verdana, veličine 12px i sive boje.

Selektori klasa

Ovaj selektor vam omogućava da dodijelite stil bez obzira na tip elementa. Ali da bi funkcionisali, potrebno je da dodate neke napomene u HTML kod, odnosno atribut klase sa nekom vrednošću koju ćete koristiti prilikom kreiranja CSS pravila.

Recimo da trebate uokviriti neke slike na stranicu. Ove slike imaju atribut klase. Na primjer:

I u datoteci stila pišemo pravilo:

Border_img (border:1px pun #00f;)

Ova klasa se može primijeniti na mnoge elemente stranice, a ne nužno samo na slike. Možete primijeniti nekoliko klasa na jedan HTML element odjednom, koje su napisane odvojene razmakom:

ID selektori

Takođe vam omogućava da dodelite stil bez obzira na tip elementa. Ali, za razliku od selektora klasa, može se koristiti samo jednom u dokumentu. Označeno heš simbolom (#). Oznaka ima id atribut. Na primjer:

Selektori atributa

Koristi se za odabir elemenata na osnovu njihovih atributa, kao i vrijednosti ovih atributa.

Za odabir elementa prema njegovom atributu, bez obzira na vrijednost ovog atributa, koristite sljedeću konstrukciju: [attribute] . Na primjer, morali smo da označimo slike crvenim okvirom koje imaju postavljen alt atribut. radimo ovo:

img (ivica:1px puna crvena;)

Možete odabrati samo oznake čiji atributi imaju određeno značenje. Na primjer, trebate primijeniti pravilo na sve oznake s atributom tipa čija je vrijednost tekst - veličina teksta je 16px. To se radi na sljedeći način:

(veličina fonta:16px;)

Ako trebate odabrati elemente čiji atribut klase sadrži riječ img, tada koristite sljedeći kod:

(margina:5px;)

Ako trebate odabrati atribut čija vrijednost počinje nekim tekstom:

(boja:#009);

Ako trebate odabrati atribut čija vrijednost završava nekim tekstom:

(font-size:10px;)

Ako trebate odabrati atribut čija vrijednost sadrži tekst:

(boja pozadine:#0cc;)

Selektori potomaka (selektori konteksta)

Selektori potomci podrazumijevaju postavljanje pravila za one elemente koji se nalaze unutar određenog elementa. Na primjeru će biti jasnije. Recimo da morate da označite crvenom bojom samo one veze a koje se nalaze unutar paragrafa p i koje su mu podređene:

Selektori srodnih elemenata

Da odaberete susjedne elemente koji se nalaze na istom nivou i imaju isti roditelj, učinite ovo:

Za odabir elementi, nalazi na jednom nivou, imamo jednog roditelja mi to radimo.

Susjedne oznake u ovom slučaju su strong i em , kao i em i a .

Selektori pseudoklasa

Pseudo-klasa je fantomska klasa, čije prisustvo zavisi od stanja elementa ili strukture dokumenta u celini. Pseudo-klase se često koriste u elementima obrasca za unos ili za definiranje ponašanja veza ili aktivnih elemenata.

Na primjer, trebate promijeniti boju posjećenih linkova:

A:posjetio (boja:#933;)

Ili, na primjer, promijenite boju teksta kada je fokus (kursor postavljen) na polje za tekst obrasca:

Ulaz: fokus (boja: crvena;)

Pseudo selektori elemenata

Pseudo elementi su uvjetni lažni elementi koji su dio postojećih elemenata ili se dodaju dodatno u dokument. Selektor pseudoelemenata i selektor pseudoklase su, iz perspektive sintakse, u suštini ista stvar. Jedina razlika je u odabranim elementima.

CSS2 definira 4 pseudo-elementa: prvo slovo (:first-letter), prvi red (:first-line) i primjenu posebnih stilova prije (:prije) i poslije (:poslije) elementa.

Postavimo, na primjer, prvo slovo svakog pasusa da ima svoj stil:

P: prvo slovo (familija fontova: Verdana, Ženeva, sans-serif; veličina fonta: 12px; boja: #333; )

Koristeći selektore, vrlo lako možete kreirati CSS pravila koja se primjenjuju na veliki broj sličnih elemenata.

Selektori atributa su selektori koji vam omogućavaju da primijenite stilove na sve HTML elemente koji imaju određeni atribut ili određenu vrijednost atributa. Postoji mnogo načina za njihovo korištenje, ali uprkos ovoj fleksibilnosti, selektori atributa se rijetko koriste u praksi, jer postoje pogodniji selektori. Iako, s druge strane, ponekad dosta pomažu.

Da, i kao i obično, kažem vam - nemojte ni pokušavati da zapamtite sve što piše ispod ako ste dobri u tome. :) Treba zapamtiti jednu stvar iz ove lekcije - šta piše u prvom pasusu. Ostalo samo treba da shvatite i razumete. Dakle.

Sintaksa selektora atributa

Da biste primijenili stilove na elemente sa određenim atributom, morate navesti ovaj atribut u uglastim zagradama, .

[atribut] ( svojstvo: vrijednost; ... )

Da bi se stilovi primenili na elemente koji imaju ne samo određeni atribut, već atribut sa određenom vrednošću, potrebno je da posle atributa i ove vrednosti upišete znak jednakosti (=), koji se može staviti u navodnike.

[attribute="value"] ( svojstvo: vrijednost; ... )

Neki atributi mogu imati više vrijednosti odvojenih razmakom (na primjer, atribut rel ili class oznake, što ćemo pogledati malo kasnije). Dakle, da biste postavili stilove za elemente koji imaju istu jednu od vrijednosti u atributima, trebate staviti ~= (približno jednake) znakove iza atributa, a zatim napisati traženu vrijednost.

[attribute~="value"] ( svojstvo: vrijednost; ... )

Četvrta opcija je namijenjena atributima čija se vrijednost može sastojati od nekoliko riječi odvojenih crticom (na primjer, ista klasa). I omogućava vam da primenite stilove na sve elemente čija je prva reč u vrednosti atributa ista. Na primjer, class="block-left" i class="block-right" . Isti dio ovdje je block , tako da se može koristiti kao vrijednost.

[atribut|="value"] ( svojstvo: vrijednost; ... )

Peti metod povezuje stilove sa elementima čije vrijednosti atributa počinju istim tekstom. Na primjer, src= "images/bird.png" i src= "images/cat.jpg" . Ovdje su isti dio slike/ili slike ili slika, itd. Taj identičan dio se bilježi kao vrijednost.

[attribute^="value"] ( svojstvo: vrijednost; ... )

Slično petom, ali ovdje se odabir temelji na dijelu teksta koji se, naprotiv, završava vrijednostima atributa. Recimo src= "image/bird.png" i src= "picture/dog.png" . Jasno je da je .png dio ovdje isti.

[attribute$="value"] ( svojstvo: vrijednost; ... )

Ako je potrebno odabrati elemente čije vrijednosti atributa imaju isti dio teksta, a nije bitno gdje su vrijednosti, onda se koristi ovaj metod. Na primjer, href= "http://site/css/" i href= "http://www.site/html/" . Ovdje je isti dio "stranica". Tako, na primjer, možete odabrati sve veze koje vode do određene stranice.

[atribut*="vrijednost"] ( svojstvo: vrijednost; ... )

Nažalost, Internet Explorer 6.0 uopće ne razumije birače atributa.

Primjer korištenja selektora atributa u CSS-u

Rezultat u pretraživaču