(attribut) - CSS-tricks

Anonim

Der er mange måder, du kan vælge elementer i CSS. Det mest grundlæggende valg er efter tagnavn, ligesom p ( ). Næsten alt mere specifikt end en tagvælger bruger attributter - classog IDbegge vælger disse attributter på HTML-elementer. Men classog IDer ikke de eneste attributter, som udviklere kan vælge. Vi kan bruge et hvilket som helst af elementets attributter som vælgere.

Attributvalg har en særlig syntaks. Her er et eksempel:

a(href="https://css-tricks.com") ( color: #E18728; )

Det er en nøjagtighedsvælger , der kun vælger links med den nøjagtige hrefattributværdi "https://css-tricks.com".

De syv forskellige typer

Attributvælgerne er som standard store og små bogstaver (se store og små bogstaver, der ikke er mellem store og små bogstaver nedenfor) og er skrevet inden for parentes ().

Der er syv forskellige typer matches, du kan finde med en attributvælger, og syntaksen er forskellig for hver. Hver af de mere komplekse attributvælger bygger på syntaksen for den nøjagtige matchvælger - de starter alle med attributnavnet og slutter med et ligetegn efterfulgt af attributværdien (erne), normalt i anførselstegn. Hvad der går mellem attributnavnet og ligetegn er, hvad der gør forskellen mellem vælgerne.

(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ærdi indeholder: attributværdi indeholder et udtryk som den eneste værdi, en værdi i en liste over værdier eller som en del af en anden værdi. For at bruge denne vælger skal du tilføje en stjerne (*) før ligetegnet. For eksempel img(alt*="art")vælger billeder med alt-teksten “abstrakt kunst” og “atlet, der starter en ny sport”, fordi værdien “kunst” er i ordet “start”.

Værdien findes i en plads-adskilt liste: værdien er enten den eneste attributværdi eller er en hel værdi i et rum-adskilt sæt værdier. I modsætning til "indeholder" -vælgeren, vil denne vælger ikke se efter værdien som et ordfragment. For at bruge denne vælger skal du tilføje en tilde (~) før ligetegnet. img(alt~="art")Vælger for eksempel billeder med alt-teksten “abstrakt kunst” og “kunstudstilling”, men ikke “atlet, der starter en ny sport” (som “indeholder” -vælgeren vælger).

Værdi starter med: attributværdi starter med det valgte udtryk. For at bruge denne vælger skal du tilføje et caret (^) før ligetegn. Glem ikke, store og små bogstaver er vigtige. For eksempel vælger img (alt = ”art”) billeder med alt-teksten “art show” og “kunstnerisk mønster”, men ikke et billede med alt-teksten “Arthur Miller”, fordi “Arthur” begynder med et stort bogstav .

Værdien er først i en dash-adskilt liste: Denne vælger minder meget om ”starter med” -vælgeren. Her matcher vælgeren en værdi, der enten er den eneste værdi eller er den første i en dash-adskilt liste over værdier. For at bruge denne vælger skal du tilføje et rørtegn (|) før ligetegnet. li(data-years|="1900")Vil f.eks. Vælge listeelementer med data-yearsværdien "1900-2000", men ikke listeelementet med data-yearsværdien "1800-1900".

Værdi slutter med: attributværdi slutter med det valgte udtryk. For at bruge denne vælger skal du tilføje et dollartegn ($) før ligetegnet. a(href$="pdf")Vælger f.eks. Hvert link, der slutter med .pdf.

En note om anførselstegn: Du kan under nogle omstændigheder gå uden anførselstegn omkring værdien, men reglerne for valg af uden anførselstegn er inkonsekvente tværbrowser. Citater fungerer altid, så hvis du holder dig til at bruge dem, kan du være sikker på, at din vælger fungerer.

Se Pen Attribute Selectors af CSS-Tricks (@ css-tricks) på CodePen.

Sjov kendsgerning: værdierne behandles som strenge, så du behøver ikke gøre noget fancy for at undslippe tegn for at få dem til at matche, som du ville gjort, hvis du brugte usædvanlige tegn i en klasse eller ID-vælger.

(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )

Sag-ufølsom matchning

Sag-ufølsomme attributvælgere er en del af CSS-arbejdsgruppens Selectors niveau 4-specifikation. Som nævnt ovenfor er attributværdistrengene som standard store og små bogstaver, men kan ændres til store og små bogstaver ved at tilføje ilige før den afsluttende parentes:

(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )

Skift mellem store og små bogstaver kan være virkelig praktisk til at målrette attributter, der indeholder uforudsigelig, menneskeskrevet tekst. Antag for eksempel, at du stylede en taleboble i en chat-app og ønskede at tilføje en "vinkende hånd" til enhver besked med teksten "hej" i en eller anden form. Du kan kun gøre det med CSS ved at bruge en case-ufølsom matcher til at fange alle mulige variationer:

Se den pen-ufølsomme CSS-attributtilpasning, der matches af CSS-Tricks (@ css-tricks) på CodePen.

Kombinerer dem

Du kan kombinere en attributvælger med andre vælgere som f.eks. Tag, klasse eller ID.

div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )

Eller endda kombinere flere attributvælgere. Dette eksempel vælger billeder med alt-tekst, der inkluderer ordet "person" som den eneste værdi eller en værdi i en rumskilt liste, og en srcværdi, der inkluderer værdien "lorem":

img(alt~="person")(src*="lorem") ( /* style rules here */ )

Se pennekombinerede attributter og kun attributvalg af CSS-Tricks (@ css-tricks) på CodePen.

Attributvælgere i JavaScript og jQuery

Attributvælgere kan bruges i jQuery ligesom enhver anden CSS-vælger. I JavaScript kan du bruge attributvælger med document.querySelector()og document.querySelectorAll().

Se penattributvælgerne i JS og jQuery af CSS-Tricks (@ css-tricks) på CodePen.

Relaterede

  • klasse
  • ID

Mere information

  • The Skinny on Attribute Selectors
  • Attributvælgerne ved MDN
  • Attributvælgere i W3C CSS-specifikationen

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Nogen Nogen Nogen Nogen 7+ Nogen Nogen