CSS klasse selektorer detaljeret

Klasseselektorer tillader at specificere stiler uafhængigt af dokumentelementerne.

CSS klasse selektorer

Klasseselektorer tillader at specificere stiler uafhængigt af dokumentelementerne.

Denne selektor kan bruges alene eller kombineres med andre elementer.

Tip:Disse selektorer kan kun bruges efter, at dokumentet er korrekt markeret, så brugen af disse selektorer kræver ofte noget planlægning og overvejelse.

For at anvende stilen uden at tage hensyn til specifikke designelementer er det mest almindelige at bruge klasseselektorer.

Rediger HTML-koden

Før klasseselektoren kan bruges, skal det specifikke dokumentmærke ændres, så klasseselektoren kan fungere korrekt.

For at knytte stilen til klasseselektoren med elementet skal klassen defineres som en passende værdi. Se HTML-koden nedenfor:

<h1 class="important">
Denne overskrift er meget vigtig.
</h1>
<p class="important">
Denne afsnit er meget vigtig.
</p>

I koden ovenfor er klassen for to elementer alle defineret som important: den første overskrift (h1-elementet) og den anden afsnit (p-elementet).

Syntaks

Herefter bruger vi følgende syntaks til at anvende stilarter på disse kategoriserede elementer, dvs. en punktum (.) foran klassenavnet, derefter kombineret med en stjernevalgselektor:

*.important {color:red;}

Hvis du kun vil vælge alle elementer med samme klasse navn, kan du ignorere stjerneselectoren i klasseselektoren, hvilket har ingen dårlige konsekvenser:

.important {color:red;}

Prøv det selv

Kombineret elementselektor

Klasseselektorer kan kombineres med elementselektorer.

For eksempel kan du måske ønske, at kun afsnittene vises som røde tekst:

p.important {color:red;}

Selektoren matcher nu alle p-elementer med class 'important', men ingen andre elementtyper matcher, uanset om de har denne class-attribut eller ej. Selektoren p.important fortolkes som: 'Alle paragrafer med class-attributten værdien 'important''. Da h1-elementet ikke er en paragraf, matcher denne regels selektor ikke, og h1-elementet bliver ikke rødt tekst.

Hvis du virkelig vil specificere en anden stil for h1-elementet, kan du bruge selektoren h1.important:

p.important {color:red;}
h1.important {color:blue;}

Prøv det selv

CSS flerklassevalg

I det foregående afsnit behandlede vi situationer, hvor class-værdien indeholder et ord. I HTML kan en class-værdi indeholde en liste over ord, adskilt af mellemrum. For eksempel, hvis du vil markere et specifikt element som både vigtigt (important) og advarsel (warning), kan du skrive:

<p class="important warning">
Dette afsnit er en meget vigtig advarsel.
</p>

Reolen af disse ord er ligegyldig, og det kan også skrives 'warning important'.

Vi antager, at alle elementer med class 'important' er fedte, og at alle elementer med class 'warning' er kursiv, og at alle elementer, der samtidig indeholder 'important' og 'warning', har en sølv baggrund. Dette kan skrives som:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Prøv det selv

Ved at koble to klasseselektorer sammen, kan du kun vælgeIndeholder samtidig disse klassenavneelementer (klassens rækkefølge er ubetydelig).

Hvis en flerklasse selektor indeholder et klassenavn, der ikke findes i klasselisten, vil matchen mislykkes. Se nedenstående regler:

.important.urgent {background:silver;}

Forventeligt vil denne selektor kun matche p-elementer, hvor class-attributten indeholder ordene important og urgent. Derfor vil en p-element, der kun har ordene important og warning i sin class-attribut, ikke matche. Men det kan matche følgende elementer:

<p class="important urgent warning">
Denne afsnit er en meget vigtig og presserende advarsel.
</p>

Prøv det selv

Vigtige oplysninger:Før versioner af IE7, kunne forskellige platformers Internet Explorer ikke korrekt håndtere flerklasse selektorer.