Există o mulțime de moduri în care puteți selecta elemente în CSS. Selecția de bază este după numele etichetei, cum ar fi p ( ). Aproape orice lucru mai specific decât un selector de etichete folosește atribute - classși IDambele selectează acele atribute pe elemente HTML. Dar classși IDnu sunt singurele atribute pe care dezvoltatorii le pot selecta. Putem folosi oricare dintre atributele unui element ca selectoare.
Selectarea atributelor are o sintaxă specială. Iată un exemplu:
a(href="https://css-tricks.com") ( color: #E18728; )Acesta este un selector de potrivire exact care va selecta doar link-uri cu valoarea exactă a hrefatributului „https://css-tricks.com”.
Cele șapte tipuri diferite
Selectorele de atribute sunt sensibile la majuscule și minuscule în mod implicit (vezi mai jos potrivirea dintre majuscule și minuscule) și sunt scrise între paranteze ().
Există șapte tipuri diferite de potriviri pe care le puteți găsi cu un selector de atribute, iar sintaxa este diferită pentru fiecare. Fiecare dintre selectorele de atribute mai complexe se bazează pe sintaxa selectorului de potrivire exact - toate încep cu numele atributului și se termină cu un semn egal urmat de valoarea (atributele) atributului, de obicei între ghilimele. Ceea ce merge între numele atributului și semnul egal este ceea ce face diferența dintre selectoare.
(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 */ )Valoarea conține: valoarea atributului conține un termen ca singură valoare, o valoare dintr-o listă de valori sau ca parte a altei valori. Pentru a utiliza acest selector, adăugați un asterisc (*) înainte de semnul egal. De exemplu, img(alt*="art")va selecta imagini cu textul alternativ „artă abstractă” și „sportiv care începe un nou sport”, deoarece valoarea „artă” se află în cuvântul „pornire”.
Valoarea se află într-o listă separată de spațiu: valoarea este fie singura valoare a atributului, fie este o valoare întreagă într-un set de valori separate de spațiu. Spre deosebire de selectorul „conține”, acest selector nu va căuta valoarea ca un fragment de cuvânt. Pentru a utiliza acest selector, adăugați o tildă (~) înainte de semnul egal. De exemplu, img(alt~="art")va selecta imagini cu textul alternativ „artă abstractă” și „spectacol de artă”, dar nu „sportiv care începe un nou sport” (pe care l-ar selecta selectorul „conține”).
Valoarea începe cu: valoarea atributului începe cu termenul selectat. Pentru a utiliza acest selector, adăugați un cursor (^) înainte de semnul egal. Nu uitați, sensibilitatea la majuscule și minuscule contează. De exemplu, img (alt = ”art”) va selecta imagini cu textul alternativ „spectacol de artă” și „model artistic”, dar nu o imagine cu textul alternativ „Arthur Miller” deoarece „Arthur” începe cu o literă mare .
Valoarea este prima dintr-o listă separată de liniuță: acest selector este foarte asemănător cu selectorul „începe cu”. Aici, selectorul se potrivește cu o valoare care este fie singura valoare, fie este prima dintr-o listă de valori separate prin liniuță. Pentru a utiliza acest selector, adăugați un caracter pipă (|) înainte de semnul egal. De exemplu, li(data-years|="1900")va selecta elemente de listă cu o data-yearsvaloare „1900-2000”, dar nu elementul de listă cu o data-yearsvaloare „1800-1900”.
Valoarea se termină cu: valoarea atributului se termină cu termenul selectat. Pentru a utiliza acest selector, adăugați un semn de dolar ($) înainte de semnul egal. De exemplu, a(href$="pdf")selectează fiecare link care se termină cu .pdf.
O notă despre ghilimele: puteți merge fără ghilimele în jurul valorii în anumite circumstanțe, dar regulile de selectare fără ghilimele sunt incoerente între browser. Cotațiile funcționează întotdeauna, deci, dacă rămâneți la utilizarea lor, puteți fi sigur că selectorul dvs. va funcționa.
Consultați Selectorele de atribute stilou de CSS-Tricks (@ css-tricks) pe CodePen.
Fapt distractiv: valorile sunt tratate ca șiruri, deci nu trebuie să faceți nicio scăpare fantezistă de caractere pentru a le face să se potrivească, așa cum ați face dacă ați folosi caractere neobișnuite într-un selector de clasă sau ID.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Potrivire nesensibilă la majuscule
Selectorii de atribute care nu fac sensibilitatea la majuscule și minuscule fac parte din specificația selectorului de nivel 4 al grupului de lucru CSS. Așa cum s-a menționat mai sus, șirurile de valori ale atributelor sunt în mod implicit sensibile la majuscule și minuscule, dar pot fi schimbate în minuscule și minuscule adăugând ichiar înainte de paranteze de închidere:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Potrivirea insensibilă la majuscule și minuscule ar putea fi foarte utilă pentru direcționarea atributelor care dețin text imprevizibil, scris de om. De exemplu, să presupunem că ați stilat o bulă de vorbire într-o aplicație de chat și ați dorit să adăugați o „mână fluturând” la orice mesaje cu textul „salut” într-o anumită formă. Puteți face acest lucru numai cu CSS, folosind un potrivitor care nu face sensibilitatea la majuscule și minuscule pentru a surprinde toate variantele posibile:
Vedeți potrivirea atributului CSS care nu face sensibilitatea la majuscule și minuscule prin CSS-Tricks (@ css-tricks) pe CodePen.
Combinându-le
Puteți combina un selector de atribute cu alte selectoare, cum ar fi etichetă, clasă sau ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Sau chiar combinați mai multe selectoare de atribute. Acest exemplu selectează imagini cu text alternativ care include cuvântul „persoană” ca singură valoare sau o valoare dintr-o listă separată de spațiu și o srcvaloare care include valoarea „lorem”:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Consultați atributele combinate stilou și selecția numai cu atribute de CSS-Tricks (@ css-tricks) pe CodePen.
Selectoare de atribute în JavaScript și jQuery
Selectorele de atribute pot fi utilizate în jQuery la fel ca orice alt selector CSS. În JavaScript, puteți utiliza selectoare de atribute cu document.querySelector()și document.querySelectorAll().
Consultați Selectorele de atribute stilou din JS și jQuery de CSS-Tricks (@ css-tricks) pe CodePen.
Legate de
- clasă
- ID
Mai multe informatii
- Selectoarele Skinny on Attribute
- Selectoare de atribute la MDN
- Selectați atribute în specificația W3C CSS
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Orice | Orice | Orice | Orice | 7+ | Orice | Orice |