Det er mange måter du kan velge elementer i CSS. Det mest grunnleggende valget er etter taggenavn, som p ( ). Nesten alt mer spesifikt enn en tagvelger bruker attributter - classog IDbegge velger på disse attributtene på HTML-elementer. Men classog IDer ikke de eneste attributtene utviklere kan velge. Vi kan bruke hvilket som helst av elementets attributter som velgere.
Attributtvalg har en spesiell syntaks. Her er et eksempel:
a(href="https://css-tricks.com") ( color: #E18728; )Det er en nøyaktig samsvarsvelger som bare vil velge lenker med den nøyaktige hrefattributtverdien "https://css-tricks.com".
De syv forskjellige typene
Attributtvelgere er som standard store og små bokstaver (se store og små bokstaver under følsomhet nedenfor), og er skrevet i parentes ().
Det er syv forskjellige typer treff du kan finne med en attributtvelger, og syntaksen er forskjellig for hver. Hver av de mer komplekse attributtvelgerne bygger på syntaksen til den nøyaktige samsvarsvelgeren - de starter alle med attributtnavnet og slutter med et likhetstegn etterfulgt av attributtverdien (e), vanligvis i anførselstegn. Det som går mellom attributtnavnet og likhetstegnet er det som utgjør forskjellen mellom velgerne.
(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 */ )Verdi inneholder: attributtverdi inneholder et begrep som den eneste verdien, en verdi i en liste over verdier eller som en del av en annen verdi. For å bruke denne velgeren, legg til en stjerne (*) før likhetstegnet. Vil for eksempel img(alt*="art")velge bilder med alt-teksten “abstrakt kunst” og “idrettsutøver som starter en ny sport”, fordi verdien “kunst” er i ordet “start”.
Verdien er i en romseparert liste: verdien er enten den eneste attributtverdien, eller er en hel verdi i et romseparert verdisett. I motsetning til "inneholder" -velgeren, vil denne velgeren ikke se etter verdien som et ordfragment. For å bruke denne velgeren, legg til en tilde (~) før likhetstegnet. Vil for eksempel img(alt~="art")velge bilder med alt-teksten “abstrakt kunst” og “kunstutstilling”, men ikke “idrettsutøver som starter en ny sport” (som “inneholder” -velgeren vil velge).
Verdi starter med: attributtverdi starter med den valgte termen. For å bruke denne velgeren, legg til et innskudd (^) før likhetstegnet. Ikke glem, saksfølsomhet betyr noe. For eksempel vil img (alt = ”art”) velge bilder med alt-teksten “art show” og “kunstnerisk mønster”, men ikke et bilde med alt-teksten “Arthur Miller” fordi “Arthur” begynner med en stor bokstav .
Verdien er først i en dash-skilt liste: Denne velgeren ligner veldig på “starter med” -velgeren. Her samsvarer velgeren med en verdi som enten er den eneste verdien eller er den første i en dash-delt verdiliste. For å bruke denne velgeren, legg til et rørtegn (|) før likhetstegnet. Vil for eksempel li(data-years|="1900")velge listeelementer med data-yearsverdien “1900-2000”, men ikke listeelementet med data-yearsverdien “1800-1900”.
Verdien slutter med: attributtverdien slutter med den valgte termen. For å bruke denne velgeren, legg til et dollartegn ($) før likhetstegnet. a(href$="pdf")Velger for eksempel hver lenke som slutter med .pdf.
Et notat om anførselstegn: Du kan i noen tilfeller gå uten anførselstegn rundt verdien, men reglene for å velge uten anførselstegn er inkonsekvente nettlesere. Sitater fungerer alltid, så hvis du holder deg til å bruke dem, kan du være sikker på at velgeren din vil fungere.
Se pennattributtvelgere av CSS-Tricks (@ css-tricks) på CodePen.
Morsomt faktum: verdiene blir behandlet som strenger, slik at du ikke trenger å unnslippe tegn for å få dem til å matche, som du ville gjort hvis du brukte uvanlige tegn i en klasse eller ID-velger.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Tilfelle-ufølsom samsvar
Saksfølsomme attributtvelgere er en del av CSS-arbeidsgruppens Selectors nivå 4-spesifikasjon. Som nevnt ovenfor er attributtverdistrenger som standard store og små bokstaver, men kan endres til store og små bokstaver ved å legge til irett før avslutningsbraketten:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Saksfølsom samsvar kan være veldig nyttig for målretting av attributter som inneholder uforutsigbar, menneskeskrevet tekst. Anta for eksempel at du stylet en snakkeboble i en chat-app og ønsket å legge til en "vinkende hånd" i alle meldinger med teksten "hei" i en eller annen form. Du kan gjøre det med bare CSS, ved å bruke en skiftesensitiv matcher for å fange alle mulige variasjoner:
Se penn-ufølsom CSS-attributtmatching av CSS-Tricks (@ css-tricks) på CodePen.
Kombinere dem
Du kan kombinere en attributtvelger med andre velgere, som tag, klasse eller ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Eller til og med kombinere flere attributtvelgere. Dette eksemplet velger bilder med alt-tekst som inkluderer ordet "person" som den eneste verdien eller en verdi i en plassskilt liste, og en srcverdi som inkluderer verdien "lorem":
img(alt~="person")(src*="lorem") ( /* style rules here */ )Se pennekombinerte attributter og kun attributtvalg av CSS-Tricks (@ css-tricks) på CodePen.
Attributtvelgere i JavaScript og jQuery
Attributtvelgere kan brukes i jQuery, akkurat som enhver annen CSS-velger. I JavaScript kan du bruke attributtvelgere med document.querySelector()og document.querySelectorAll().
Se pennattributtvelgere i JS og jQuery av CSS-Tricks (@ css-tricks) på CodePen.
I slekt
- klasse
- ID
Mer informasjon
- The Skinny on Attribute Selectors
- Attributtvelgere ved MDN
- Attributtvelgere i W3C CSS-spesifikasjonen
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Noen | Noen | Noen | Noen | 7+ | Noen | Noen |