Attribute selectors i CSS

Attribute selectors er en smart måte å formatere innhold på, basert på tagger og deres attributter. Istedenfor å kun rette oss mot en bestemt HTML-tag, kan vi i tillegg rette oss inn mot et attributt. I tillegg er det mulig å teste på verdien av attributtet, og da begynner det å bli svært interessant og nyttig.

Eksempel

<img src="hedda.jpg" alt="Hedda">
<img src="jonas.jpg" alt="Jonas">

I HTML-koden ovenfor har vi to attributter: src og alt.

Med følgende kode formateres begge bilder:

img{
   border: solid 5px yellow;
}

Hvis vi kun ønsker å formatere det ene bildet ville du kanskje brukt en class:

<img src="hedda.jpg" alt="Hedda">
<img src="jonas.jpg" alt="Jonas" class="ansatt">

.ansatt{
        border: solid 5px yellow;
}

Det finnes en smartere måte, og det heter attribute selectors…

Her formaterer vi KUN de bildene som har et alt-attributt.

img[alt]{
       border: solid 5px yellow;
}

Alternativt kunne vi valgt å gjøre slik for å sjekke hva verdien av alt er:

img[alt=Jonas]{
       border: solid 5px yellow;
}

Noe som vil resultere i at kun dette bildet formateres:

<img src="jonas.jpg" alt="Jonas">

Eller, vi kan sjekke om verdien finnes som en del av attributtet:

img[alt~=Jonas]{
       border: solid 5px yellow;
}

Også i dette eksempelet er det bildet av Jonas som formateres. Merk: selv om alt-attributtet her inneholder f.eks. Jonas Olsen så vil det formateres da vi sjekker om ordet i sin helhet finnes som en del av verdien.

Men, det finnes enda flere muligheter. Neste variant er at du kan teste om en verdi er lik noe, eller om verdien starter med noe etterfulgt av en bindestrek.

img[alt|=Jonas]{
       border: solid 5px yellow;
}

Dette vil formatere bildet dersom Jonas finnes i alt-attributtet, også hvis det er etterfulgt av en bindestrek og flere verdier.

<img src="jonas.jpg" alt="Jonas-Olsen">

Og som ikke det var nok, det er også mulig å teste hva verdien starter med, slutter med og inneholder. Dette gjøres slik:

Verdien starter med

img[alt^=Jo]{
       border: solid 5px yellow;
}

Verdien slutter med:

img[alt$=nas]{
      border: solid 5px yellow;
}

Verdien inneholder:

img[alt*=ona]{
       border: solid 5px yellow;
}

Alle eksemplene formaterer bildet av Jonas basert på alt-attributtet og dets verdi:

<img src="jonas.jpg" alt="Jonas">

Dette er selvfølgelig bare et eksempel hvor vi kun tester på alt-attributtet. Du kan bruke dette på alle attributter på en hvilken som helst HTML-tag. I eksempelet vi har brukt her kunne vi gjort tilsvarende tester på src og f.eks. valgt å formatere bilder som er lagret i ulike mapper på forskjellig måte.

Et eksempel hvor også bildet av Jonas formateres, denne gangen basert på hvor det er lagret (src):

<img src="ansatte/jonas.jpg" alt="Jonas">
<img src="produkter/produktbilde.jpg" alt="Produktnavn">

img[src^=ansatte]{
   border: solid 5px yellow;  
}

Kombiner med Pseudo-elementer

Merk: det er også mulig å kombinere med Pseudo-elementer, f.eks. slik:

a[href$=".pdf"]::after{
      content: " (PDF)";    
}

I eksempelet ovenfor blir linken til PDF-filen formatert, ikke linken til XLS-filen.

<a href="prisliste.pdf">Prisliste</a>
<a href="prisliste.xls">Prisliste</a>

I eksempelet ovenfor vil alle linker som slutter på .pdf automatisk få teksten (PDF) etter seg. Her snakker vi altså om automatisering, mindre bruk av Class og mindre rom for feil (siden vi ikke må huske på å legge til en Class).

Relaterte kurs

• Se våre kurs i HTML og CSS