atribute css. Selectoare speciale în CSS

Selectoare de atribute de etichetă

Selectorii de atribute sunt selectori speciali care leagă un stil de un element în funcție de faptul dacă are un anumit atribut sau dacă are o anumită valoare. Există mai multe moduri de a utiliza aceste selectoare.

1. Selector de atribute simplu

Se pare ca:

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

Și leagă stilul de acele elemente în interiorul cărora este adăugat atributul specificat. De exemplu:

puternic(
culoarea rosie;
}
...

Auto este un motor mecanic fără șenile vehicul"> vehicul rutier cu cel putin 4 roti.

Rezultat:

În figură, puteți vedea că regula css (culoarea textului roșu) este aplicată elementului puternic, la care se adaugă atributul titlu.

2. Selector de atribute cu valoare

Sintaxa pentru acest selector este:

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

leagă stil la elemente ale căror etichete au un atribut cu cel specificat Numeși valoare. Exemplu:

A(
culoarea rosie;
dimensiunea fontului: 150%;
}
...
.ru" target="_blank">Link în fereastră nouă

Rezultat:

După cum puteți vedea, ambele elemente de tip hyperlink au atributul ţintă, dar regula css care mărește textul linkului de 1,5 ori și își schimbă culoarea în roșu este aplicată etichetei al cărui atribut ţintă are sensul "_gol".

3. Una dintre mai multe valori de atribut

Unele valori ale atributelor pot fi listate cu spații, cum ar fi numele claselor. Următorul selector este utilizat pentru a specifica o regulă de stil atunci când lista de valori ale atributelor conține valoarea dorită:

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

Stilul este aplicat dacă atributul are valoarea cerută sau dacă se află într-o listă de valori separate prin spațiu. De exemplu:

{
culoarea rosie;
dimensiunea fontului: 150%;
}
...

Telefonul nostru: 777-77-77

Adresa noastră: St. Moscova sovietic 5

Obțineți următorul rezultat:

Regula se aplică elementului, unde se numără valorile atributelor clasă există un sens tel.

4. Cratima în valoarea atributului

Este permisă utilizarea unei cratime în valorile identificatorilor și claselor. Pentru a lega un stil de elemente ale căror valori de atribut pot conține o cratimă, puteți utiliza următorul construct:

[atribut|="valoare"] ( stil )
Selector[atribut|="valoare"] ( stil )

Stilul este aplicat acelor elemente a căror valoare de atribut începe cu valoarea specificată urmată de o cratimă. De exemplu:

{
culoarea rosie;
dimensiunea fontului: 150%;
}
...

• Paragraful 1


• Punctul 2


• Punctul 3


• Punctul 4

Rezultat:

În exemplu, regula de stil se aplică numai acelor elemente de listă al căror nume de clasă începe cu valoarea "meniul".

5. Valoarea atributului începe cu un anumit text

Acest selector setează stilul pentru un element dacă valoarea atributului etichetei începe cu o anumită valoare. Pot exista două opțiuni:

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

În primul caz stil se aplică tuturor elementelor ale căror etichete au un atribut cu cel specificat Numeși o valoare care începe cu cea specificată subșiruri. În al doilea caz, același lucru, doar la anumite elemente specificate în selector principal. Exemplu:

A(
culoare:verde;
greutatea fontului: bold;
}
...

Rezultat:

Exemplul arată cum să afișați diferit link-urile externe și link-urile interne. Legăturile externe încep întotdeauna cu șirul „http://”. Prin urmare, în selector, indicăm că stilul se aplică numai link-urilor care au atributul hrefîncepe cu valoare http://.

6. Valoarea atributului se termină cu un anumit text

Leagă un stil de elemente a căror valoare de atribut se termină cu textul specificat. Are următoarea sintaxă:

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

În primul caz stil se aplică tuturor elementelor care au atribut cu cele specificate Numeși are o valoare care se termină cu cea specificată subșir. În al doilea caz, același lucru, doar la specificat selectoare. În acest fel, de exemplu, este posibilă afișarea diferită a diferitelor formate de imagini grafice. De exemplu:

img(
chenar: 5px roșu continuu;
}
...

imagine gif

imagine în format png

Rezultat:

În exemplu, toate imaginile cu extensia gif vor fi afișate cu un chenar roșu de cinci pixeli.

7. Valoarea atributului conține șirul specificat

Acest selector leagă stilul de etichete a căror valoare de atribut conține textul specificat. Sintaxă:

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

Stil se leagă de elemente care au atribut cu numele specificat și valoarea sa conține cel specificat subșir. De exemplu:

img(
chenar: 5px roșu continuu;
}
...

Imagine din folderul galerie

Imagine dintr-un alt folder

Rezultat:

În exemplu, stilul este aplicat imaginilor care sunt încărcate din folder "Galerie".

Asta e totul despre selectorii de atribute. Toate metodele de mai sus pot fi combinate între ele:

Selector[attribute1="valoare1"][attribute2="valoare2"] ( stil )

În plus, permiteți-mi să vă reamintesc despre selectoarele CSS speciale:

• folosind simbolurile „+” și „~” se formează;
• simbolul „>” leagă stilurile CSS la copil Etichete;
• simbol<пробел>generează selectori de context.

În următoarele articole, ne vom uita și la pseudo-elemente și pseudo-clase, care oferă un instrument puternic de management al stilului.

Atât, până ne întâlnim din nou.

Vlad Merjevici

Multe etichete diferă ca efect în funcție de atributele pe care le folosesc. De exemplu, etichetați poate crea un buton, un câmp de text și alte elemente de formular prin simpla schimbare a valorii atributului tip. Totuși, adăugarea regulilor de stil la selectorul INPUT va aplica stilul tuturor elementelor create cu această etichetă în același timp. Pentru a controla în mod flexibil stilul unor astfel de elemente, CSS introduce selectoare de atribute. Acestea vă permit să setați un stil bazat pe prezența unui anumit atribut sau valoare de etichetă.

Să ne uităm la câteva cazuri de utilizare tipice pentru astfel de selectoare.

Selector de atribute simplu

Setează stilul pentru un element dacă este setat un anumit atribut de etichetă. Sensul lui nu este important în acest caz. Sintaxa pentru utilizarea unui astfel de selector este următoarea.

[atribut] ( Descrierea regulilor de stil )
Selector[atribut] ( Descrierea regulilor de stil )

Stilul este aplicat acelor etichete în care este adăugat atributul specificat. Nu este permis un spațiu între numele selectorului și paranteze drepte.

Exemplul 13-1 arată cum să schimbați stilul unei etichete , dacă i se adaugă atributul titlu.

Exemplul 13.1. Tipul elementului în funcție de atributul acestuia

HTML5 CSS 2.1 IE Cr Op Sa Fx

Continuând binecunoscuta lege a lui Murphy, care spune: Dacă pot apărea probleme, se va întâmpla cu siguranță., putem introduce observația noastră: După ce o pagină web este afișată corect într-un browser, se dovedește că nu este afișată corect în altul.

Rezultatul exemplului este prezentat în Fig. 13.1.

Orez. 13.1. Schimbați stilul unui element în funcție de utilizarea atributului titlu

Acest exemplu modifică culoarea textului din interiorul containerului când i se adaugă titlul. Rețineți că nu este nevoie să repetați proprietățile de stil pentru selectorul Q, deoarece acestea sunt moștenite de la selectorul Q.

Atribut cu valoare

Setează stilul pentru un element atunci când este setată o anumită valoare a atributului. Sintaxa aplicației este următoarea.

[atribut="valoare"] ( Descrierea regulilor de stil )
Selector[atribut="valoare"] ( Descrierea regulilor de stil )

În primul caz, stilul este aplicat tuturor etichetelor care conțin valoarea specificată. Și în al doilea - doar anumitor selectori.

Exemplul 13-2 arată cum să schimbați stilul unui link dacă eticheta conține atributul țintă cu valoarea _blank . În acest caz, linkul se va deschide într-o fereastră nouă, iar pentru a arăta acest lucru, folosim stiluri pentru a adăuga o imagine mică în fața textului linkului.

Să presupunem că un site dorește să separe stilul link-urilor obișnuite și externe - link-uri care duc la alte site-uri. Pentru a nu introduce eticheta clasă nouă, să folosim selectori de atribute. Legăturile externe se caracterizează prin adăugarea unui protocol la adresă, de exemplu, HTTP este folosit pentru a accesa documente hipertext. Prin urmare, linkurile externe încep cu cuvântul cheie http:// și îl adaugă la selectorul A, așa cum se arată în Exemplul 13-3.

V acest exemplu conține două link-uri care duc la domenii diferite - com și ru. În același timp, la fiecare astfel de link este adăugată o imagine de fundal folosind stiluri (Fig. 13.4). Proprietățile stilului vor fi aplicate numai linkurilor al căror atribut href se termină în „.ru” sau „.com”. Rețineți că, adăugând o bară oblică (http://www.yandex.ru/) sau o adresă de pagină (http://www.yandex.ru/fun.html) la numele domeniului, vom schimba finalul și stilul nu se va mai aplica. În acest caz, este mai bine să utilizați un selector în care textul dat apare oriunde în valoarea atributului.

Valoarea atributului conține textul specificat

Există opțiuni când stilul ar trebui să fie aplicat unei etichete cu un anumit atribut, în timp ce un anumit text face parte din valoarea sa. În același timp, nu se știe exact unde este inclus textul dat în valoare - la început, la mijloc sau la sfârșit. Într-un astfel de caz, ar trebui utilizată următoarea sintaxă.

[atribut*="valoare"] ( Descrierea regulilor de stil )
Selector[atribut*="valoare"] ( Descrierea regulilor de stil )

Exemplul 13-5 arată cum să schimbați stilul linkurilor care conțin cuvântul „htmlbook” în atributul href.

Exemplul 13.5. Stil pentru diferite site-uri

HTML5 CSS 2.1 IE Cr Op Sa Fx

Pas cu pas | Grafică pentru web

Rezultatul acestui exemplu este prezentat în Fig. 13.5.

Orez. 13.5. Schimbarea stilului linkurilor care conțin „htmlbook” în adresă

Una dintre valorile multiple ale atributelor

Unele valori ale atributelor pot fi listate cu spații, cum ar fi numele claselor. Pentru a seta un stil atunci când lista conține valoarea dorită, se folosește următoarea sintaxă.

[atribut~="valoare"] ( Descrierea regulilor de stil )
Selector[atribut~="valoare"] ( Descrierea regulilor de stil )

Stilul este aplicat dacă atributul are valoare specificată sau este inclus într-o listă de valori separate prin spații (Exemplul 13.6).

Exemplul 13.6. Stil bazat pe numele clasei

HTML5 CSS 2.1 IE Cr Op Sa 5 Fx

În acest exemplu, culoarea textului verde este aplicată selectorului H3 dacă numele de clasă al stratului este setat la bloc . Rețineți că un rezultat similar poate fi obținut utilizând constructul *= în loc de ~= .

Cratima în valoarea atributului

Numele de identificare și de clasă au voie să utilizeze caracterul cratimă (-), care permite crearea de valori semnificative pentru atributele id și clasă. Pentru a schimba stilul elementelor care au o cratimă în valoare, utilizați următoarea sintaxă.

[atribut|="valoare"] ( Descrierea regulilor de stil )
Selector[atribut|="valoare"] ( Descrierea regulilor de stil )

Stilul se aplică elementelor al căror atribut începe cu valoarea specificată sau cu un fragment de valoare urmat de o cratimă (exemplul 13.7).

Exemplul 13.7. Cratime în valori

HTML5 CSS 2.1 IE Cr Op Sa Fx

În acest exemplu, numele clasei este setat la block-menu-therm , deci constructul |="block" este folosit în stiluri, deoarece valoarea începe cu acest cuvânt și există cratime în valoare.

Toate aceste metode pot fi combinate între ele, definind un stil pentru elementele care conțin două sau mai multe atribute. În astfel de cazuri, parantezele drepte sunt consecutive.

[attribute1="value1"][attribute2="value2"] ( Descrierea regulilor de stil )
Selector[attribute1="value1"][attribute2="value2"] ( Descrierea regulilor de stil )

Întrebări de verificat

1. Este necesar să setați culoarea de fundal a câmpului de text. Ce stil este potrivit pentru acest scop?

1. INTRARE ( fundal: #acdacc; )
2. INTRARE ( fundal: #acdacc; )
3. INTRARE ( fundal: #acdacc; )
4. INTRARE ( fundal: #acdacc; )
5. INTRARE ( fundal: #acdacc; )

2. Ce stil ar trebui folosit pentru a schimba culoarea textului numai din al doilea paragraf?

Primul paragraf

Al doilea paragraf

Al treilea paragraf

1. P (culoare: roșu; )
2. P (culoare: roșu; )
3. P (culoare: roșu; )
4. P (culoare: roșu; )
5. P (culoare: roșu; )

3. Cărui element se va aplica următorul stil?

( fundal: #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

Răspunsuri

1. INTRARE ( fundal: #acdacc; )

2. P (culoare: roșu; )

3.

În ciuda flexibilității și varietății lor, selectorii de atribute sunt rar utilizați în CSS. Deși utilizarea lor oferă oportunități excelente pentru dezvoltatorii web. Acestea vă permit să modificați proprietățile unui element cu un anumit atribut și, în plus, cu o anumită valoare. Selectorii de atribute folosesc o sintaxă diferită în funcție de rezultatul pe care doriți să îl obțineți.

Selector de atribute simplu

Folosit pentru a seta stilul unui atribut dacă valoarea atributului nu are efect. Și are următoarea sintaxă:

[atribut] ( proprietatea 1: valoare; ... ) selector [atribut] ( proprietatea 1: valoare; ... )

Ca exemplu, încercați să scrieți următoarea linie în foaia de stil:

P (culoare: roșu; /* Culoare text */ )

Culoarea textului se va schimba numai atunci când atributul align este aplicat etichetei p.

Atribut cu valoare

Se aplică atunci când este setat un atribut cu o anumită valoare. Sintaxa aplicației este următoarea:

[atribut="valoare"] ( proprietatea 1: valoare; ... ) selector [atribut="valoare"] ( proprietatea 1: valoare; ... )

În practică, de exemplu, se pot aplica următoarele:

P (culoare: roșu; /* Culoare text */ ) p (culoare: bleumarin; /* Culoare text */ )

Valoarea atributului începe cu un anumit text

Acest mod de setare a stilului poate fi aplicat, de exemplu, link-urilor sau altor elemente ale căror valori de atribut încep cu anumite nume. De exemplu:

Imagine (marja:15px automat; )

Sintaxa pentru acest mod de setare a stilurilor este următoarea:

[atribut^="valoare"] ( proprietatea 1: valoare; ... ) selector [atribut^="valoare"] ( proprietatea 1: valoare; ... )

Valoarea atributului se termină cu un anumit text

Este folosit destul de rar. De obicei, acest mod de setare a stilurilor este folosit la sfârșitul numelui oricăror link-uri sau permisiuni de fișier. Sintaxa generală este:

[atribut$="valoare"] ( proprietate1: valoare; ... ) selector [atribut$="valoare"] ( proprietate1: valoare; ... )

Puteți aplica această metodă astfel:

Img (/* Dacă rezoluția fișierului imagine se termină în .png */ margin:10px auto; ) a ( /* Dacă linkul se termină în .com */ padding-right: 25px; )

Valoarea atributului conține textul specificat

Există momente când doriți să stilați anumite link-uri care au același text în numele valorii atributului. Sintaxa pentru scriere este următoarea:

[atribut*="valoare"] ( proprietatea 1: valoare; ... ) selector [atribut*="valoare"] ( proprietatea 1: valoare; ... )

De exemplu, am aplicat un stil pentru a schimba aspectul linkurilor în care apare numele „sdcvoy”:

Auto-crearea site-ului | Limbajul HTML | Motor de căutare celebru

Ca urmare, am primit următoarele:

Una dintre valorile multiple ale atributelor

Adesea, în sarcina atributelor există o enumerare a mai multor valori separate printr-un spațiu. După cum probabil ați ghicit, puteți seta proprietățile stilului pe o singură valoare. Sintaxa acestei metode este următoarea:

[atribut~="valoare"] ( proprietatea 1: valoare; ... ) selector [atribut~="valoare"] ( proprietatea 1: valoare; ... )

Să aruncăm o privire la un mic exemplu:

Antetul în roșu

Rezultatul ar trebui să fie următorul:

Cratima în valoarea atributului

Foarte des, numele valorilor atributelor constă din mai multe cuvinte separate printr-o cratimă. Și se întâmplă să se repete primul cuvânt din titlu. Și astfel pentru astfel de atribute este posibil să setați stiluri separat. Acest lucru se face foarte simplu. De exemplu astfel:

Div a (culoare:verde; /* Culoare link */ padding: 15px; /* Margini */ )

Sintaxa generală a aplicației este:

[atribut|="valoare"] ( proprietate1: valoare; ... ) selector [atribut|="valoare"] ( proprietate1: valoare; ... )

S-ar putea să nu vă amintiți folosirea selectoarelor de atribute, așa cum am spus mai devreme că sunt folosite rar, dar sunt un instrument foarte flexibil în dezvoltarea web. Între timp, vă propun să treceți la următorul subiect.

CSS este un instrument puternic de dezvoltare web. Ne permite să aducem la viață aproape toate ideile și ideile noastre.

Un avantaj important al CSS este capacitatea de a aplica stiluri tuturor elementelor de același tip de pe pagină. Pentru a folosi această oportunitate în mod eficient, trebuie să înțelegeți bine selectoare CSS. Un selector este exact ceea ce se aplică o regulă.

Există mai multe tipuri de selectoare CSS. Să trecem la considerarea acestor tipuri și exemple de aplicare a acestora.

Selector universal

Selectorul universal stabilește stilul pentru toate elementele dintr-un document. Notat cu un asterisc (*). De exemplu, aceasta specifică faptul că toate elementele vor fi roșii:

* (culoarea rosie;)

Selectoare de elemente

Când sunt scrise stiluri pentru un document HTML, etichetele HTML (h1, p, img, a, body...) acţionează ca elemente. De exemplu:

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

V acest caz toate titlurile de prim nivel din document vor fi Verdana, 12px și gri.

Selectori de clasă

Acest selector vă permite să atribuiți un stil indiferent de tipul elementului. Dar pentru ca ele să funcționeze, trebuie să adăugați câteva note la codul HTML, și anume atributul de clasă cu o anumită valoare pe care o veți folosi atunci când creați regula CSS.

Să presupunem că trebuie să încadrezi câteva imagini pe pagină. Aceste imagini li se atribuie un atribut de clasă. De exemplu:

Și în fișierul de stil scriem regula:

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

Această clasă poate fi aplicată multor elemente ale paginii, nu neapărat doar imaginilor. Mai multe clase pot fi aplicate unui element HTML simultan, care sunt scrise cu un spațiu:

selectoare ID

De asemenea, vă permite să atribuiți un stil indiferent de tipul de element. Dar, spre deosebire de un selector de clasă, acesta poate fi folosit o singură dată într-un document. Notat prin semnul lire sterline (#). Eticheta are un atribut id. De exemplu:

Selectori de atribute

Folosit pentru a selecta elemente în funcție de atributele lor, precum și de valorile acelor atribute.

Pentru a selecta un element după atributul său, indiferent de valoarea acestui atribut, se folosește următoarea construcție: [atribut] . De exemplu, trebuia să marchem cu un cadru roșu imaginile care au setat atributul alt. Facem asta:

img (chenar: 1px roșu continuu;)

Puteți selecta numai acele etichete ale căror atribute au o anumită valoare. Este necesar, de exemplu, să aplicați regula — dimensiunea textului este de 16 px pentru toate etichetele cu atributul type, a căror valoare este text . Se face astfel:

(dimensiunea fontului: 16px;)

Dacă trebuie să selectați elemente al căror atribut de clasă conține cuvântul img , atunci se folosește următorul cod:

(marja: 5px;)

Dacă doriți să selectați un atribut a cărui valoare începe cu ceva text:

(culoare:#009);

Dacă doriți să selectați un atribut a cărui valoare se termină cu ceva text:

(dimensiunea fontului: 10px;)

Dacă doriți să selectați un atribut a cărui valoare conține ceva text:

(culoarea fundalului:#0cc;)

Selectoare de descendenți (selectoare de context)

Selectoare descendenții implică stabilirea de reguli pentru acele elemente care se află în interiorul unui anumit element. Va fi mai clar cu un exemplu. Să presupunem că trebuie să evidențiați cu roșu numai acele legături a care se află în interiorul paragrafului p și sunt copii ale acestuia:

Selectoare de elemente soră (vecină).

Pentru a selecta elemente adiacente care sunt situate la același nivel și au același părinte, procedați astfel:

Pentru selecție elemente, situat la același nivel, având ca un părinte să facă acest lucru.

Vecinii în acest caz sunt puternici și em , precum și em și a .

Selectori de pseudo-clase

O pseudo-clasă este o clasă fantomă, a cărei prezență depinde de starea elementului sau de structura documentului în ansamblu. Pseudo-clasele sunt adesea folosite pe elementele formularului de intrare sau pentru a specifica comportamentul legăturilor sau elementelor active.

De exemplu, trebuie să schimbați culoarea linkurilor vizitate:

A: vizitat (culoare:#933;)

Sau, de exemplu, schimbați culoarea textului când focalizarea (cursorul este plasat) pe câmpul de text al formularului:

Intrare: focalizare (culoare: roșu;)

Selectoare de pseudo-element

Pseudo-elementele sunt elemente fictive condiționate care fac parte din elementele existente sau care sunt adăugate documentului în plus. Selectorul de pseudo-element și selectorul de pseudo-clasă, din punct de vedere al sintaxei, sunt de fapt același lucru. Diferența este doar în elementele selectate.

CSS2 definește 4 pseudo-elemente: prima literă (:first-letter ), prima linie (:first-line ) și aplicarea de stiluri speciale înainte (:before ) și după (:after ) un element.

Să setăm, de exemplu, prima literă a fiecărui paragraf cu propriul stil:

P:prima literă (familie de fonturi: Verdana, Geneva, sans-serif; dimensiunea fontului: 12px; culoare: #333; )

Cu selectoare, este destul de ușor să creați reguli CSS care se aplică unui număr mare de elemente similare.

Selectorii de atribute sunt selectoare care vă permit să aplicați stiluri oricărui element HTML care are un anumit atribut sau o anumită valoare de atribut. Există multe modalități de a le folosi, dar în ciuda acestei flexibilități, selectoarele de atribute sunt rareori utilizate în practică, deoarece există selectoare mai convenabile. Deși, pe de altă parte, uneori ajută foarte mult.

Da, și ca de obicei vă spun - nu încercați să memorați tot ce este scris mai jos, dacă sunteți prieten cu capul. :) Din această lecție, trebuie să vă amintiți un lucru - ceea ce este scris în primul paragraf. Restul trebuie doar să înțelegi și să înțelegi. Asa de.

Sintaxa selectoarelor de atribute

Pentru a aplica stiluri elementelor cu un anumit atribut, trebuie să specificați acest atribut între paranteze drepte, .

[atribut] ( Valoarea proprietății; ... )

Pentru ca stilurile să fie aplicate elementelor care au nu doar un anumit atribut, ci un atribut cu o anumită valoare, trebuie să scrieți un semn egal (=) după atribut și această valoare, care poate fi citată.

[atribut="valoare"] ( Valoarea proprietății; ... )

Unele atribute pot avea mai multe valori separate prin spații simultan (de exemplu, eticheta rel sau atributul class, pe care le vom analiza în curând). Deci, pentru a stiliza elementele care au una dintre valorile din atribute la fel, trebuie să puneți semnele ~= (aproximativ egale) după atribut și apoi să scrieți valoarea necesară.

[atribut~="valoare"] ( Valoarea proprietății; ... )

A patra opțiune este pentru atributele a căror valoare poate consta din mai multe cuvinte separate printr-o cratimă (de exemplu, aceeași clasă). Și vă permite să aplicați stiluri tuturor elementelor care au același prim cuvânt în valoarea atributului. De exemplu, class= "block-left" și class= "block-right" . Aici aceeași parte este bloc, deci poate fi folosită ca valoare.

[atribut|="valoare"] ( Valoarea proprietății; ... )

A cincea metodă aplică stiluri elementelor ale căror valori ale atributelor încep cu același text. De exemplu, src= "images/bird.png" și src= "images/cat.jpg" . Aici aceeași parte sunt imagini/sau imagini sau imagini etc. Această parte identică este scrisă ca valoare.

[atribut^="valoare"] ( Valoarea proprietății; ... )

Este similar cu cel de-al cincilea, dar aici selecția trece peste partea de text, care, dimpotrivă, se termină cu valorile atributelor. Să spunem src= „image/bird.png” și src= „picture/dog.png” . Este clar că partea .png este aceeași aici.

[atribut$="valoare"] ( Valoarea proprietății; ... )

Dacă este necesar să selectați elemente ale căror valori de atribut au aceeași parte a textului și nu contează unde este valoarea, atunci se folosește această metodă. De exemplu, href= "http://website/css/" și href= "http://www.website/html/" . Aici aceeași parte „site” . Astfel, să spunem, puteți evidenția toate linkurile care duc către un anumit site.

[atribut*="valoare"] ( Valoarea proprietății; ... )

Din păcate, Internet Explorer 6.0 nu înțelege deloc selectorii de atribute.

Un exemplu de utilizare a selectoarelor de atribute în CSS

Rezultat în browser