HTML & CSS for begyndere (Del 26): Sådan fungerer adgangen med selektorerne (1)

Selectorerne bestemmer, på hvilken måde CSS-stilarter tildeles HTML-elementerne. Ved en tilsvarende definition angives først navnet på elementet, som selector skal tilgå. Deklarationen skrives derefter inden for krøllede parenteser. Inden for en deklaration kan én eller flere egenskaber angives. Den generelle syntaks ser således ud:

Selector {
   Egenskab1: Værdi;
   Egenskab2: Værdi;
   Egenskab3: Værdi;
}

En tilsvarende definition er allerede blevet introduceret i den forrige vejledning.

h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Sørg absolut for at afslutte hver deklaration med et semikolon.

Et kig på de tilgængelige selectorer

Faktisk byder CSS på et ret stort antal selectorer, hvoraf jeg vil præsentere de vigtigste for jer. For én ting er sikker: Kun hvis man behersker arbejdet med selectorer, kan man overhovedet definere CSS-egenskaber fornuftigt.

Den nemmeste måde at tildele stilarter til HTML-dokumenter på er via element-selector.

Ved at bruge følgende syntaks tildeles alle p-elementer farven sort.

p { 
   color: #009966; 
}

Hvis I ønsker at tildele flere elementer samme stil, er det også muligt.

I dette tilfælde noterer I simpelthen de relevante elementer efter hinanden, adskilt af kommaer.

p, h1,  li { 
   color: #000; 
}

I kan også tildele elementer flere stilarter. Stilarterne noteres hver især adskilt af et semikolon.

p { 
   color: #000; 
   background-color: red;
}

Det er også muligt at kombinere de nævnte varianter.

p, h1,  li { 
   color: #009966; 
   background-color: red;
}

Resultatet kunne se sådan ud:

Områder med flere elementer

Ofte er der behov for at formatere et område, der består af flere HTML-elementer. Til sådanne tilfælde har HTML to specielle elementer, span og div. Disse elementer vil - i øvrigt også i denne serie - møde jer igen og igen.

Et eksempel:

<div class="artikel">
  <h1>Farbexplosion</h1>
  <p class="thema">En vejledning til oprettelse af farbexplosion fra <span class="autor">MarkusMelzer</span>.</p>
</div>

Den eneste forskel mellem div og span er, at div-elementet tvinger en ny linje i tekstflowet. span derimod skaber ikke en ny linje. I det viste eksempel defineres et div-område, hvor der er en overskrift og en tekstafsnit. Inden for tekstafsnittet er der igen et span-område.

ID- og klasseselectorer

Indtil videre er der blevet brugt elementselectorer. Ved hjælp af det følgende eksempel formateres alle h1-overskrifter med en sådan selector.

h1 { 
   color: #000; 
   background-color: red;
}

Men dette er naturligvis ikke altid ønsket. Hvad nu hvis I kun vil tildele visse egenskaber til én eller flere, men ikke alle h1-overskrifter? Til sådanne tilfælde tilbyder CSS to muligheder, nemlig klassse- og ID-selectorer.

Med klasseselktorer kan HTML-elementer med klassattributter vælges meget præcist. I det pågældende HTML-element skal attributten class angives. Klassedefinitioner starter med et punktum.

Et eksempel:

.rød { 
   color: rød; 
}

Her er klassen rød defineret. For at tilføje de røde tildelte egenskaber til et HTML-element angives class efterfulgt af klassens navn.

<p class="rød">PSD-Tutorials.de</p>

ID-selector kan også bruges på samme enkle måde. ID-selector kendes på et hak.

#topnavi { 
   color: blå; 
};

I dette eksempel defineres ID'en topnavi. Men pas på: I et dokument må en ID faktisk kun tildeles én gang. Adgang til en defineret ID-egenskab ser således ud:

<div id="topnavi">Her står navigationen</div>

Attributet id tildeles ID-navnet. Vær opmærksom på, at dobbelthashtag ikke skal noteres her.





De viste oplysninger kan også kombineres med hinanden. Således kan man f.eks. tildele flere klasser til et HTML-element.

<p class="rød stor">PSD-Tutorials.de</p>

I dette eksempel tildeles tekstopslaget de to klasser rød og stor. Hvis I vil angive en klasse og en ID, vil det se sådan ud:

<p class="rød" id="navi">PSD-Tutorials.de</p>

Det er også muligt at kombinere elementer og ID'er. Et eksempel herpå:

div.navi { 
   color: blå; 
}

Dette syntaks vil kun påvirke div-elementer med klassen navi. p-elementer, som også har klassen navi, vil forblive uberørt.

I CSS er der en anden måde at kombinere selektorer på. Se følgende syntaks:

h1 { 
   color: rød;
}
em { 
   color: blå; 
}

Her tildeles alle overskrifter af første orden farven rød. em-elementer får derimod farven blå.

Ved at kombinere begge instruktioner kan man sikre, at kun em-elementer farves blå, som er inde i h1-elementer.

h1 em { 
   color: blå; 
};

Elementnavnene skal noteres her uden kommaer imellem.

Dette er i øvrigt en populær faldgrube, som selv CSS-nybegyndere falder i. Her er samme syntaks, men med et komma:

h1, em { 
   color: blå; 
}

Hvad betyder denne syntaks? Alle h1- og alle em-elementer påvirkes. Dette er altså noget helt andet end syntaksen uden komma!

En anden vigtig selektor er universalselektoren. Denne giver mulighed for at vælge et vilkårligt element. Denne selektor defineres med en stjerne (*).

* { 
   color: rød; 
}

Ved denne syntaks vil alle elementer blive farvet røde. Også med denne selektor er der nogle syntaks-særpræg at tage højde for.

#mainnavi * { 
   color: rød; 
}

I dette eksempel vil forgrundsfarven på alle elementer inden i elementet med ID'et mainnavi blive sat til rød. Dette gælder dog ikke for elementet selv.

Hvis universalselektoren stod i starten af en deklaration, behøvede man ikke notere den. Sådan noget som dette ville altså være overflødigt:

* p { 
   color: rød; 
}

Denne syntaks er ækvivalent med følgende:

p { 
   color: rød; 
}

I det næste tutorial vil I lære yderligere selektorer at kende.