css atributi. Posebni selektori u CSS-u

Birači atributa oznake

Selektori atributa su posebni selektori koji povezuju stil s elementom na temelju toga je li određeni atribut prisutan ili ima određenu vrijednost. Postoji nekoliko načina za korištenje ovih birača.

1. Jednostavan selektor atributa

Izgleda kao:

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

I povezuje stil s onim elementima unutar kojih je dodan navedeni atribut. Na primjer:

jak(
boja: crvena;
}
...

Automobil to je mehanički motor bez staze vozilo"> cestovno vozilo s najmanje 4 kotača.

Proizlaziti:

Na slici možete vidjeti da je css pravilo (crvena boja teksta) primijenjeno na element snažna, kojemu je dodan atribut titula.

2. Selektor atributa s vrijednošću

Sintaksa za ovaj selektor je:

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

veže stil na elemente čije oznake imaju atribut s navedenim Ime i vrijednost. Primjer:

a(
boja: crvena;
veličina fonta:150%;
}
...
.ru" target="_blank">Veza u novom prozoru

Proizlaziti:

Kao što vidite, oba elementa tipa hiperveze imaju atribut cilj, ali na oznaku se primjenjuje css pravilo koje povećava tekst veze 1,5 puta i mijenja mu boju u crvenu čiji atribut cilj ima značenje "_prazan".

3. Jedna od nekoliko vrijednosti atributa

Neke vrijednosti atributa mogu se navesti s razmacima, poput naziva klasa. Sljedeći birač koristi se za određivanje pravila stila kada popis vrijednosti atributa sadrži željenu vrijednost:

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

Stil se primjenjuje ako atribut ima traženu vrijednost ili ako se nalazi na popisu vrijednosti odvojenih razmakom. Na primjer:

{
boja: crvena;
veličina fonta:150%;
}
...

Naš telefon: 777-77-77

Naša adresa: Moskva ul. sovjetski 5

Dobijte sljedeći rezultat:

Pravilo se primjenjuje na element, gdje je među vrijednostima atributa razreda postoji smisao tel.

4. Crtica u vrijednosti atributa

Dopušteno je koristiti crticu u vrijednostima identifikatora i klasa. Za vezanje stila na elemente čije vrijednosti atributa mogu sadržavati crticu, možete koristiti sljedeću konstrukciju:

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

Stil se primjenjuje na one elemente čija vrijednost atributa počinje navedenom vrijednošću nakon koje slijedi crtica. Na primjer:

{
boja: crvena;
veličina fonta:150%;
}
...

• Stavak 1


• Točka 2


• Točka 3


• Stavka 4

Proizlaziti:

U primjeru, pravilo stila primjenjuje se samo na one elemente popisa čiji naziv klase počinje vrijednošću "izbornik".

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 s specificiranim Ime i vrijednost koja počinje s navedenim podnizovi. U drugom slučaju, ista stvar, samo za određene elemente navedene u glavni selektor. Primjer:

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

Proizlaziti:

Primjer pokazuje kako drugačije prikazati vanjske i unutarnje veze. Vanjske poveznice uvijek počinju s nizom "http://". Stoga u selektoru označavamo da se stil primjenjuje samo na veze koje imaju atribut href počinje s vrijednošću http://.

6. Vrijednost atributa završava određenim tekstom

Povezuje stil s elementima čija vrijednost atributa završava navedenim tekstom. Ima sljedeću sintaksu:

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

U prvom slučaju stil odnosi se na sve elemente koji imaju atribut s navedenim Ime i ima vrijednost koja završava s navedenim podniz. U drugom slučaju ista stvar, samo na navedeno selektori. Na taj je način, primjerice, moguće različito prikazati različite formate grafičkih slika. Na primjer:

img(
rub: 5px puno crveno;
}
...

gif slika

slika u png formatu

Proizlaziti:

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

7. Vrijednost atributa sadrži navedeni niz

Ovaj birač povezuje stil s oznakama čija vrijednost atributa sadrži navedeni tekst. Sintaksa:

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

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

img(
rub: 5px puno crveno;
}
...

Slika iz mape galerije

Slika iz druge mape

Proizlaziti:

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

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

Birač[atribut1="vrijednost1"][atribut2="vrijednost2"] ( stil )

Osim toga, podsjetit ću vas na posebne CSS selektore:

• pomoću simbola "+" i "~" se formiraju;
• simbol ">" povezuje css stilove s dijete oznake;
• simbol<пробел>generira selektore konteksta.

U sljedećim člancima također ćemo pogledati pseudo-elemente i pseudo-klase, koji pružaju moćan alat za upravljanje stilom.

To je sve, do ponovnog susreta.

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 jednostavnom promjenom vrijednosti atributa type. Međutim, dodavanje stilskih pravila u selektor INPUT će primijeniti stil na sve elemente stvorene ovom oznakom u isto vrijeme. Za fleksibilnu kontrolu stila takvih elemenata, CSS uvodi selektore atributa. Omogućuju vam postavljanje stila na temelju prisutnosti određenog atributa ili vrijednosti oznake.

Pogledajmo neke tipične slučajeve upotrebe takvih selektora.

Jednostavan birač atributa

Postavlja stil za element ako je postavljen 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 uglatih zagrada nije dopušten.

Primjer 13-1 pokazuje kako promijeniti stil oznake , ako mu se doda atribut naslova.

Primjer 13.1. Vrsta elementa ovisno o atributu

HTML5 CSS 2.1 IE Cr Op Sa Fx

Nastavljajući dobro poznati Murphyjev zakon, 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, ispostavlja se da nije ispravno prikazana u drugom.

Rezultat primjera prikazan je na sl. 13.1.

Riža. 13.1. Promijenite stil elementa ovisno o upotrebi atributa naslova

Ovaj primjer mijenja boju teksta unutar spremnika 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 kada je određena vrijednost atributa postavljena. 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, a da bismo to prikazali, koristimo stilove za dodavanje male slike ispred teksta veze.

Recimo da web mjesto želi razdvojiti stil običnih i vanjskih poveznica—veza koje vode do drugih stranica. Da ne upisujete oznaku nova klasa, upotrijebimo selektore atributa. Za vanjske poveznice karakteristično je dodavanje protokola adresi, na primjer, HTTP se koristi za pristup hipertekstualnim dokumentima. Stoga vanjske veze započinju ključnom riječi http:// i dodajte je selektoru A, kao što je prikazano u primjeru 13-3.

NA ovaj primjer sadrži dvije poveznice koje vode na različite domene - com i ru. Istodobno, pozadinska slika dodaje se svakoj takvoj vezi pomoću stilova (Sl. 13.4). Svojstva stila primjenjivat će se samo na veze č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 više se 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, dok je neki tekst dio njegove vrijednosti. Istodobno, ne zna se točno gdje je navedeni tekst uključen u vrijednost - na početku, sredini ili kraju. U tom slučaju treba koristiti sljedeću sintaksu.

[attribute*="value"] ( Opis pravila stila )
Selektor[atribut*="vrijednost"] ( Opis pravila stila )

Primjer 13-5 pokazuje kako promijeniti stil veza koje sadrže riječ "htmlbook" u atributu href.

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 poveznica koje sadrže "htmlbook" u adresi

Jedna od više vrijednosti atributa

Neke vrijednosti atributa mogu se navesti s razmacima, poput naziva klasa. Za postavljanje stila kada popis sadrži željenu vrijednost, koristi se sljedeća sintaksa.

[atribut~="vrijednost"] ( Opis pravila stila )
Selektor[atribut~="vrijednost"] ( Opis pravila stila )

Stil se primjenjuje ako atribut ima navedena vrijednost ili je uključeno u popis vrijednosti odvojen razmakom (Primjer 13-6).

Primjer 13.6. Stil temeljen na nazivu klase

HTML5 CSS 2.1 IE Cr Op Sa 5 Fx

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 korištenjem konstrukcije *= umjesto ~=.

Crtica u vrijednosti atributa

Nazivi identifikatora i klasa smiju koristiti znak crtice (-), što omogućuje stvaranje smislenih vrijednosti za id i atribute klase. Da biste promijenili stil elemenata koji imaju 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, ime klase je postavljeno na block-menu-therm, tako da se konstrukcija |="block" koristi u stilovima, budući da vrijednost počinje ovom riječju i postoje crtice u vrijednosti.

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="value1"][attribute2="value2"] ( Opis pravila stila )

Pitanja za provjeru

1. Potrebno je postaviti boju pozadine tekstualnog polja. Koji je stil prikladan za ovu svrhu?

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

2. Koji stil treba koristiti za promjenu boje teksta samo u drugom odlomku?

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. ULAZ ( pozadina: #acdacc; )

2. P (boja: crvena;)

3.

Unatoč svojoj fleksibilnosti i raznolikosti, selektori atributa rijetko se koriste u CSS-u. Iako njihova uporaba pruža velike mogućnosti za web programere. Omogućuju vam da promijenite svojstva elementa s danim atributom, štoviše s određenom vrijednošću. Selektori atributa koriste različitu sintaksu ovisno o rezultatu koji želite postići.

Jednostavan birač atributa

Koristi se za postavljanje stila atributa ako vrijednost atributa nema učinka. I ima sljedeću sintaksu:

[atribut] ( svojstvo1: vrijednost; ... ) birač [atribut] ( svojstvo1: vrijednost; ... )

Kao primjer, pokušajte napisati sljedeći redak u svojoj tablici stilova:

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

Boja teksta će se promijeniti samo kada se atribut align primijeni na oznaku p.

Atribut s vrijednošću

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

[atribut="vrijednost"] ( svojstvo1: vrijednost; ... ) birač [atribut="vrijednost"] ( svojstvo1: 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

Ovakav način postavljanja stila može se primijeniti, primjerice, na poveznice ili druge elemente čije vrijednosti atributa počinju određenim nazivima. Na primjer:

Slika (margina:15px auto;)

Sintaksa za ovaj način postavljanja stilova je sljedeća:

[atribut^="vrijednost"] ( svojstvo1: vrijednost; ... ) birač [atribut^="vrijednost"] ( svojstvo1: vrijednost; ... )

Vrijednost atributa završava određenim tekstom

Koristi se prilično rijetko. Obično se ovaj način postavljanja stilova koristi na kraju naziva bilo koje veze ili dopuštenja datoteke. Opća sintaksa je:

[attribute$="value"] ( property1: value; ... ) birač [attribute$="value"] ( property1: value; ... )

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

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

Vrijednost atributa sadrži navedeni tekst

Ponekad želite stilizirati određene veze koje imaju isti tekst u nazivu vrijednosti atributa. Sintaksa za pisanje je sljedeća:

[atribut*="vrijednost"] ( svojstvo1: vrijednost; ... ) birač [atribut*="vrijednost"] ( svojstvo1: vrijednost; ... )

Kao primjer, primijenio sam stil za promjenu izgleda veza na kojima se pojavljuje naziv "sdcvoy":

Samostalna izrada stranice | HTML jezik | Poznata tražilica

Kao rezultat, dobio sam sljedeće:

Jedna od više vrijednosti atributa

Često u zadatku atributa postoji nabrajanje nekoliko vrijednosti odvojenih razmakom. Kao što ste možda pogodili, možete postaviti svojstva stila na jednu vrijednost. Sintaksa ove metode je sljedeća:

[atribut~="vrijednost"] ( svojstvo1: vrijednost; ... ) birač [atribut~="vrijednost"] ( svojstvo1: vrijednost; ... )

Pogledajmo mali primjer:

Zaglavlje crveno

Rezultat bi trebao biti sljedeći:

Crtica u vrijednosti atributa

Vrlo često se naziv vrijednosti atributa sastoji od nekoliko riječi odvojenih crticom. I događa se da se prva riječ u naslovu ponavlja. I tako je za takve atribute moguće zasebno postaviti stilove. To se radi vrlo jednostavno. Na primjer ovako:

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

Opća sintaksa aplikacije je:

[atribut|="vrijednost"] ( svojstvo1: vrijednost; ... ) birač [atribut|="vrijednost"] ( svojstvo1: vrijednost; ... )

Možda se ne sjećate upotrebe selektora atributa, kao što sam već rekao da se rijetko koriste, ali oni su vrlo fleksibilan alat u web razvoju. U međuvremenu predlažem prijelaz na sljedeću temu.

CSS je moćan alat za web razvoj. Omogućuje nam da oživimo gotovo sve svoje ideje i zamisli.

Važna prednost CSS-a je mogućnost primjene stilova na sve elemente iste vrste na stranici. Kako biste učinkovito iskoristili ovu priliku, morate dobro razumjeti CSS selektori. Selektor je ono na što se pravilo odnosi.

Postoji nekoliko vrsta CSS selektora. Prijeđimo na razmatranje ovih vrsta i primjera njihove primjene.

Univerzalni selektor

Univerzalni selektor postavlja stil za sve elemente u dokumentu. Označeno zvjezdicom (*). Na primjer, ovo specificira da će svi elementi biti crveni:

* (boja: crvena;)

Selektori elemenata

Kada se pišu stilovi za HTML dokument, HTML oznake (h1, p, img, a, body...) djeluju kao elementi. Na primjer:

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

NA ovaj slučaj svi naslovi prve razine u dokumentu bit će Verdana, 12px i sivi.

Izbornici klasa

Ovaj birač vam omogućuje dodjeljivanje stila bez obzira na vrstu elementa. Ali da bi radili, trebate dodati neke bilješke u HTML kod, naime atribut klase s nekom vrijednošću koju ćete koristiti prilikom stvaranja CSS pravila.

Recimo da trebate uokviriti neke slike na stranici. Ovim je slikama dodijeljen atribut klase. Na primjer:

I u datoteci stila pišemo pravilo:

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

Ova se klasa može primijeniti na mnoge elemente stranice, ne nužno samo na slike. Na jedan HTML element odjednom se može primijeniti nekoliko klasa koje se pišu s razmakom:

ID selektori

Također vam omogućuje dodjeljivanje stila bez obzira na vrstu elementa. No, za razliku od selektora klase, može se koristiti samo jednom u dokumentu. Označava se znakom funte (#). Oznaka ima atribut id. Na primjer:

Selektori atributa

Koristi se za odabir elemenata na temelju njihovih atributa, kao i vrijednosti tih atributa.

Za odabir elementa po atributu, bez obzira na vrijednost ovog atributa, koristi se sljedeća konstrukcija: [atribut] . Na primjer, trebali smo označiti crvenim okvirom slike koje imaju postavljen alt atribut. Mi radimo ovo:

img (border:1px full red;)

Možete odabrati samo one oznake čiji atributi imaju određenu vrijednost. Potrebno je, primjerice, primijeniti pravilo — veličina teksta je 16px na sve oznake s atributom type čija je vrijednost text . To se radi na sljedeći način:

(veličina fonta:16px;)

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

(margina:5px;)

Ako želite odabrati atribut čija vrijednost počinje nekim tekstom:

(boja:#009);

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

(veličina fonta:10px;)

Ako želite odabrati atribut čija vrijednost sadrži neki tekst:

(boja-pozadine:#0cc;)

Selektori potomaka (selektori konteksta)

Selektori potomci podrazumijevaju postavljanje pravila za one elemente koji se nalaze unutar pojedinog elementa. Bit će jasnije uz primjer. Pretpostavimo da trebate označiti crvenom bojom samo one veze a koje se nalaze unutar odlomka p i njegova su djeca:

Selektori sestrinskih (susjedskih) elemenata

Za odabir susjednih elemenata koji se nalaze na istoj razini i imaju istog roditelja, učinite sljedeće:

Za odabir elementi, nalazi se na istoj razini, s jednim roditeljem.

Susjedi su u ovom slučaju jaki i em , kao i em i a .

Selektori pseudo-klasa

Pseudoklasa je fantomska klasa čija prisutnost ovisi o stanju elementa ili strukturi dokumenta u cjelini. Pseudoklase se često koriste na elementima ulaznog obrasca ili za specificiranje ponašanja veza ili aktivnih elemenata.

Na primjer, trebate promijeniti boju posjećenih poveznica:

A:posjećeno (color:#933;)

Ili, na primjer, promijenite boju teksta kada se fokus (kursor) postavi na tekstualno polje forme:

Unos: fokus (boja: crvena;)

Selektori pseudoelemenata

Pseudoelementi su uvjetni lažni elementi koji su dio postojećih elemenata ili dodatno dodani dokumentu. Selektor pseudo-elemenata i selektor pseudo-klase, u smislu sintakse, zapravo su ista stvar. Razlika je samo u odabranim elementima.

CSS2 definira 4 pseudoelementa: prvo slovo (:first-letter), prvi red (:first-line) i primjenu posebnih stilova prije (:before) i nakon (:after) elementa.

Postavimo, na primjer, prvo slovo svakog odlomka s vlastitim stilom:

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

Pomoću selektora vrlo je jednostavno stvoriti CSS pravila koja se primjenjuju na velik broj sličnih elemenata.

Selektori atributa su selektori koji vam omogućuju primjenu stilova na bilo koji HTML element koji ima određeni atribut ili određenu vrijednost atributa. Postoji mnogo načina za njihovo korištenje, ali unatoč ovoj fleksibilnosti, selektori atributa rijetko se koriste u praksi, budući da postoje praktičniji selektori. Iako, s druge strane, ponekad itekako pomažu.

Da, i kao i obično vam kažem - ne pokušavajte zapamtiti sve što je dolje napisano, ako ste prijatelji s glavom. :) Iz ove lekcije trebate zapamtiti jednu stvar - što piše u prvom odlomku. Ostalo samo trebate razumjeti i razumjeti. Tako.

Sintaksa selektora atributa

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

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

Kako bi se stilovi mogli primijeniti na elemente koji nemaju samo određeni atribut, već atribut s određenom vrijednošću, morate napisati znak jednakosti (=) iza atributa i ove vrijednosti, koji se može staviti u navodnike.

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

Neki atributi mogu imati više vrijednosti odvojenih razmakom odjednom (na primjer, rel oznaka ili atribut klase, koje ćemo pogledati za trenutak). Dakle, da biste postavili stilove za elemente koji imaju jednu od istih vrijednosti u atributima, trebate staviti ~= znakove (približno jednake) iza atributa, a zatim napisati potrebnu vrijednost.

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

Četvrta opcija je za atribute čija se vrijednost može sastojati od nekoliko riječi odvojenih crticom (na primjer, ista klasa). I omogućuje vam primjenu stilova na sve elemente koji imaju istu prvu riječ u vrijednosti atributa. Na primjer, class= "block-left" i class= "block-right" . Ovdje je isti dio blok, pa se može koristiti kao vrijednost.

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

Peta metoda primjenjuje stilove na elemente čije vrijednosti atributa počinju s istim tekstom. Na primjer, src= "images/bird.png" i src= "images/cat.jpg" . Ovdje je isti dio slike/ ili slike ili slika itd. Upravo je taj identični dio zapisan kao vrijednost.

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

Sličan je petom, ali ovdje izbor ide preko dijela teksta koji, naprotiv, završava vrijednostima atributa. Recimo src= "image/bird.png" i src= "picture/dog.png" . Jasno je da je .png dio ovdje isti.

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

Ako je potrebno odabrati elemente čije vrijednosti atributa imaju isti dio teksta, a nije važno gdje je vrijednost, tada se koristi ova metoda. Na primjer, href= "http://website/css/" i href= "http://www.website/html/" . Ovdje isti dio "site" . Tako, recimo, možete istaknuti sve poveznice koje vode do određene stranice.

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

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

Primjer korištenja selektora atributa u CSS-u

Rezultat u pregledniku