Du har et registreringsskjema med fem forskjellige inputfelt: navn, e-post, telefon, passord og en avkrysningsboks for vilkår. Du vil at tekstfeltene skal ha avrundede hjørner, at e-postfeltet skal ha et eget ikon, og at avkrysningsboksen skal styles helt annerledes. Med vanlige type- og klasseselektorer ender du opp med å legge til ekstra klasser på hvert eneste felt. En attribute selector i CSS lar deg treffe elementene direkte basert på attributtene de allerede har, uten en eneste ekstra klasse i HTML-en.
Grunnleggende syntaks for attribute selectors i CSS
En attribute selector skrives med hakeparenteser rundt attributtnavnet. Den enkleste formen, [type], velger alle elementer som har en type-attributt, uansett hvilken verdi den har. Skriver du [placeholder], treffer du alle elementer med en placeholder-tekst.
Vil du treffe en bestemt verdi, bruker du likhetstegn: [type="text"] velger bare elementer der type er nøyaktig "text". Du kan kombinere dette med en typeselektor foran: input[type="text"] velger kun input-elementer der type er "text", ikke andre elementer som tilfeldigvis har en type-attributt.
Denne syntaksen fungerer med alle HTML-attributter. Du kan bruke [name="email"], [href], [placeholder="Skriv her"] eller [data-status="active"]. Nettleseren bryr seg ikke om hvilken attributt du velger. Har elementet attributten, treffer selektoren.
Attribute selector CSS i praksis: skjemaer og lenker
Den vanligste bruken av attribute selectors er styling av skjemafelt. HTML-skjemaer bruker samme <input>-element for tekst, e-post, passord, avkrysningsbokser og radioknapper. Uten attribute selectors har du ingen enkel måte å skille dem i CSS. Med input[type="checkbox"] og input[type="radio"] kan du gi disse en helt egen stil uten ekstra klasser.
Et annet praktisk eksempel er lenker. Med a[href^="https://"] treffer du alle eksterne lenker som starter med "https://". Tegnet ^= betyr "begynner med". Tilsvarende betyr $= "slutter med", så a[href$=".pdf"] treffer alle lenker til PDF-filer. Og *= betyr "inneholder", så a[href*="youtube"] treffer alle lenker som har "youtube" i URL-en.
Disse tre variantene gir deg presisjon langt utover det vanlige selektorer tilbyr:
- [attr^="verdi"] matcher attributter som begynner med verdien.
- [attr$="verdi"] matcher attributter som slutter med verdien.
- [attr*="verdi"] matcher attributter som inneholder verdien.
Spesifisitet: attribute selectors teller like mye som klasser
Mange antar at attribute selectors er svakere enn klasseselektorer fordi de brukes sjeldnere. Det stemmer ikke. En attribute selector har nøyaktig samme spesifisitet som en klasseselektor: 0-1-0. Det betyr at [type="text"] og .tekstfelt veier like tungt når nettleseren avgjør hvilken regel som vinner.
Hvis du har både en klasseregel og en attributtregel med lik spesifisitet, vinner den som står sist i stilarket. Vet du hvordan spesifisitet i CSS fungerer, er dette logisk. Har du ikke den kunnskapen, kan rekkefølgeavhengigheten skape frustrasjon når stiler plutselig overstyres uten tydelig grunn.
Du kan gjøre attribute selectors mer spesifikke ved å legge til kontekst. form input[type="text"] har spesifisitet 0-1-2 (en attributtselektor pluss to typeselektorer). Denne tilnærmingen er nyttig når du bare vil treffe inputfelt innenfor et bestemt skjema, ikke alle tekstfelt på hele siden.
Vanlige feil med attribute selectors
Den første feilen folk gjør er å glemme anførselstegnene rundt verdien. Skriver du [type=text] i stedet for [type="text"], fungerer det teknisk i de fleste nettlesere. Men når verdien inneholder mellomrom eller spesialtegn, brekker det. Bruk alltid anførselstegn.
En annen feil er å bruke attribute selectors der en enkel klasseselektor hadde vært bedre. Hvis du legger til en egendefinert attributt bare for å kunne style et element, er en klasse nesten alltid riktigere. Attribute selectors gir mest verdi når du styler elementer basert på attributter som allerede finnes i HTML-en, som type, href, name og placeholder.
Mange overser også at attribute selectors er case-sensitive som standard. [type="Text"] treffer ikke et element med type="text". Legger du til i før lukkehakeparentesen, som i [type="text" i], gjør du sammenligningen case-insensitive. Denne lille detaljen kan spare deg for mye feilsøking, spesielt med data-attributter der verdiene varierer.
Neste steg
Attribute selectors gir deg presisjon når du velger elementer basert på deres egenskaper. Neste steg er å lære CSS combinators, som lar deg velge elementer basert på deres posisjon i HTML-strukturen: barn, etterkommere og søskenselektorer. Trenger du en repetisjon på de mest grunnleggende selektortypene, finn dem i artikkelen om CSS-selektorer. For en komplett oversikt over hvordan attribute selectors fungerer, er MDN sin referanse for attribute selectors en nyttig kilde.
Denne artikkelen bygger på innhold fra kurset CSS - selektorer på Utdannet.no. I kurset jobber du praktisk med attribute selectors, lærer å kombinere dem med andre selektorer, og får hands-on erfaring med spesifisitetsberegning.
