1. Webdesign 101 forside
  2.  » CSS
  3.  » CSS under hjelmen

CSS attributselektorer

Disse selektorer er en, om ikke underkendt, så i mine øjne underudnyttet mulighed for meget præcis udvælgelse af HTML-elementer der har andre fælles egenskaber end lige netop elementnavn.

Attributselektorerne gør det muligt at sætte specielle formregler for et utal af kombinationer af attributter og deres værdier. I det følgende gengiver jeg en række eksempler på dette.

[attribut] matcher ethvert element, der har den pågældende attribut.
Element[attribut] matcher det konkrete element, hvis det har den pågældende attribut.

Eksempler:

#indhold [href]{text-decoration:overline underline}

Webdesign – illustreret håndbog

Eksemplet skal vise alle elementer i #indhold-elementet, der har en href-attribut, med en streg over og en streg under elementet.

#indhold em[class] {
  font-style:normal;font-variant:small-caps;
  font-size:90%}

Webdesign – illustreret håndbog kan købes hos forlaget Globe A/S.

Eksemplet skal vise alle em-elementer, der har en class-attribut, med kapitæler i stedet for kursiv.

Element[attribut="værdi"] matcher det eller de elementer, der har den pågældende attribut, hvis attributten har den pågældende værdi.
Eksempler:

#indhold a[href="http://webdesign101.dk"] {
color:teal;text-decoration:none;
border-bottom:2px dotted maroon;}

Webdesign – illustreret håndbog

Eksemplet skal vise et link til en bestemt URI med en blågrøn farve og en rødbrun 2 pixel bred priklinje undet linket.

Element[attribut~="værdi"] matcher det eller de elementer, der har den pågældende attribut, og hvis den pågældende værdi optræder i en liste af værdier.
Eksempel:

#indhold p[class~="advarsel"] {
  background:yellow;
  padding:0.3em .5em;
  border:1px solid black;}

Undlad venligst at klikke på Send-knappen mere en én gang. Behandlingen af de indsendte data kan tage et antal sekunder

I ovenstående eksempel har p-markøren følgende udformning:
<p class="sansserif advarsel">

Element[attrib|="værdi"] matcher den første del af en attributværdi, dersom værdien indeholder en bindestreg

Det er velkendt at man i England og USA har højst forskellige meninger om, hvordan det skal lyde, når man siger tomatoes øst for Atlanten eller tomatoes vest for Atlanten.

HTML-kode:
<p class="sprog">Det er velkendt ...
<em lang="en-GB">tomatoes</em>øst for Atlanten 
eller <em lang="en-US">tomatoes</em> 
vest for Atlanten.</p>
CSS-kode:
p.sprog em[lang|="en"] {font-style:normal;font-family:arial;}
em:lang(en-GB) {color:green;}
em:lang(en-US){color:red;}

Denne selektor er især beregnet til brug i forbindelse med sprogattributter som lang og hreflang, der kan have værdier der indeholder en bindestreg, som i ovenstående HTML-kode eksempel.

Engelsk-engelsk skal vises med grøn skrift, mens US-engelsk skal vises med rød skrift.

Element[attribut^="http:"] Matcher elementer der indeholder en attribut med en værdi, der begynder med den anførte streng. (CSS3).

Eric Meyers hjemmeside

HTML-kode:
<a href="http://meyerweb.com">Eric Meyers hjemmeside</a>
CSS-kode:
a[href^="http:"] {
text-decoration:none;
color:teal;
border-bottom:3px double maroon;}

Elementet skal vises med en blågrøn farve og en dobbelt understregning.

Element[attrib$="værdi"] matcher elementer der indeholder en attribut med en værdi der ender med den anførte værdi. (CSS3).

Webdesign 101

HTML-kode
<a href="http://webdesign.dk">Webdesign 101</a>
CSS-kode
a[href$=".dk"] {
font-style:italic;
color:red;
text-decoration:none;}

Fremhæver linktekster for links der hører til .dk domænet. Disse skal vises med rød kursiv skrift.

Element[attrib*="værdi"] matcher elementer med en given attribut, der indeholder den specificerede værdi (tekststreng). (CSS3).

Der meldes om vindstyrker på op til 80 sekundmeter i Fredericia Gammel Havn.

HTML-kode
<p title="stormvarsel">Der meldes ... </p>
CSS-kode
p[title*="varsel"] {background:yellow;color:maroon;
font-weight:bold;}

Fremhæver elementer hvis title-attribut indeholder tekststrengen “varsel”.

Føjer jeg nu et par klasser til ovenstående eksempel, får jeg:

Der meldes om vindstyrker på op til 80 sekundmeter i Fredericia Gammel Havn.

HTML-kode
<p class="advarsel sansserif" title="stormvarsel">Der meldes ... </p>
CSS-kode

Samme som i tidligere eksempler: .advarsel tegner en ramme om en gul boks, .sansserif sætter Arial-skriften.

Vise URI'en gemt i et tekstlink

Du kan finde oplysninger om layout-med float-egenskaben på denne webside: Layout med float-egenskaben.

#indhold p.x5 a {
  color:#257; 
  font-style:normal;
  text-decoration:none;
  border-bottom:1px solid #257;}
#indhold p.x5 a[href]:after { 
  color:black;
  content:" ("attr(href)")"; 
  font-style:italic;
  text-decoration:none;
  border-bottom:1px solid white;}

Formdeklaration nummer to matcher links med en href-attribut og bruger pseudoelementet ::after til at værdien af denne attribut. Om pseudoelementer, se artiklen Pseudoelementer.

Ideen med dette er et gøre det umligt i en artikel at nøjes med navnet på en hjemmeside, for eksempel Jørgen Farum Jensens hjemmeside i et link i en artikeltekst. For den der læser artiklen betyder det intet, hun behøver jo blot at klikke på linket for at finde frem til min hjemmeside. Men hvis artiklen nu udskrives på en printer for at blive anvendt for eksempel i en undervisningssituation, vil den der læser papirudgaven af artiklen jo være ilde stedt. Hun kan kun se ordene, ikke den underliggende URI.

Derfor synes jeg det er en god idé at bruge disse formdeklarationer i et print stylesheet.

Juli 2009