Det finns många sätt att välja element i CSS. Det mest grundläggande valet är efter taggnamn, som p ( ). Nästan allt mer specifikt än en taggväljare använder attribut - classoch IDbåda väljer attributen på HTML-element. Men classoch IDär inte de enda attributen som utvecklare kan välja. Vi kan använda alla elementets attribut som väljare.
Attributval har en speciell syntax. Här är ett exempel:
a(href="https://css-tricks.com") ( color: #E18728; )Det är en väljare för exakt matchning som bara väljer länkar med det exakta hrefattributvärdet "https://css-tricks.com".
De sju olika typerna
Attributväljare är skiftlägeskänsliga som standard (se skiftlägeskänslig matchning nedan) och skrivs inom parentes ().
Det finns sju olika typer av matchningar som du kan hitta med en attributväljare, och syntaxen är olika för varje. Var och en av de mer komplexa attributväljarna bygger på syntaxen för väljaren för exakt matchning - de börjar alla med attributnamnet och slutar med ett likhetstecken följt av attributvärdet, vanligtvis i citat. Vad som går mellan attributnamnet och lika tecken är vad som gör skillnaden mellan väljarna.
(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 */ )Värde innehåller: attributvärdet innehåller en term som enda värde, ett värde i en lista med värden eller som en del av ett annat värde. För att använda denna väljare lägger du till en asterisk (*) före likhetstecknet. Till exempel img(alt*="art")kommer att välja bilder med alt text ”abstrakt konst” och ”idrottsman startar en ny sport”, eftersom värdet ”art” i ordet ”start”.
Värde finns i en platsavgränsad lista: värdet är antingen det enda attributvärdet eller är ett helvärde i en mellanseparerad uppsättning värden. Till skillnad från "innehåller" -väljaren kommer den här väljaren inte att leta efter värdet som ett ordfragment. För att använda den här väljaren, lägg till en tilde (~) före likhetstecknet. Till exempel img(alt~="art")kommer att välja bilder med alt text ”abstrakt konst” och ”art show”, men inte ”idrottsman startar en ny sport” (som ”innehåller” väljare skulle välja).
Värde börjar med: attributvärde börjar med den valda termen. För att använda den här väljaren lägger du till en markör (^) före likhetstecknet. Glöm inte, skiftlägeskänslighet är viktigt. Till exempel väljer img (alt = ”art”) bilder med alt-texten “art show” och “artistiskt mönster”, men inte en bild med alt-texten “Arthur Miller” eftersom “Arthur” börjar med en stor bokstav .
Värdet är först i en streckad lista: Den här väljaren liknar väljaren "börjar med". Här matchar väljaren ett värde som antingen är det enda värdet eller är det första i en streckadskild lista med värden. För att använda denna väljare, lägg till ett rörtecken (|) före likhetstecknet. Till exempel li(data-years|="1900")kommer att välja listobjekt med data-yearsvärdet ”1900-2000”, men inte listobjektet med ett data-yearsvärde på ”1800-1900”.
Värde slutar med: attributvärdet slutar med den valda termen. För att använda denna väljare lägger du till ett dollartecken ($) före likhetstecknet. Välj till exempel a(href$="pdf")varje länk som slutar med .pdf.
En anmärkning om offert: Du kan gå utan citat runt värdet under vissa omständigheter, men reglerna för att välja utan offert är inkonsekvent webbläsare. Citat fungerar alltid, så om du håller dig till att använda dem kan du vara säker på att din väljare kommer att fungera.
Se pennaattributväljare av CSS-Tricks (@ css-tricks) på CodePen.
Roligt faktum: värdena behandlas som strängar, så du behöver inte göra något för att fly från tecken för att få dem att matcha, som du skulle göra om du använde ovanliga tecken i en klass eller ID-väljare.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Skiftlägeskänslig matchning
Skiftlägeskänsliga attributväljare är en del av CSS-arbetsgruppens Selectors nivå 4-specifikation. Som nämnts ovan är attributsträngar som standard skiftlägeskänsliga, men kan ändras till skiftlägeskänsliga genom att lägga till istrax före stängningsfästet:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Skiftlägeskänslig matchning kan vara riktigt bra för inriktning på attribut som innehåller oförutsägbar, mänsklig skriven text. Antag till exempel att du formaterade en pratbubbla i en chattapp och ville lägga till en "viftande hand" till alla meddelanden med texten "hej" i någon form. Du kan bara göra det med CSS genom att använda en skiftlägeskänslig matchare för att fånga alla möjliga variationer:
Se PenSkiftkänslig CSS-attributmatchning av CSS-Tricks (@ css-tricks) på CodePen.
Kombinera dem
Du kan kombinera en attributväljare med andra väljare, som tagg, klass eller ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Eller kombinera till och med flera attributväljare. Detta exempel väljer bilder med alt-text som innehåller ordet ”person” som det enda värdet eller ett värde i en mellanslagslista och ett srcvärde som inkluderar värdet “lorem”:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Se pennkombinerade attribut och attribut-endast val av CSS-Tricks (@ css-tricks) på CodePen.
Attributväljare i JavaScript och jQuery
Attributväljare kan användas i jQuery precis som alla andra CSS-väljare. I JavaScript kan du använda attributväljare med document.querySelector()och document.querySelectorAll().
Se pennattributväljare i JS och jQuery av CSS-Tricks (@ css-tricks) på CodePen.
Relaterad
- klass
- ID
Mer information
- The Skinny on Attribute Selectors
- Attributväljare vid MDN
- Attributväljare i W3C CSS-specifikationen
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Några | Några | Några | Några | 7+ | Några | Några |