HTML & CSS for nybegynnere (Del 26): Slik fungerer tilgangen med selektorer (1)

Selektorene bestemmer på hvilken måte CSS-stiler tildeles HTML-elementer. Ved en passende definisjon angis først navnet på elementet som selektoren skal gripe inn på. Den faktiske deklarasjonen skjer deretter innenfor krølleparenteser. Innenfor en deklarasjon kan en eller flere egenskaper angis. Den generelle syntaksen ser derfor slik ut:

Selektor {
   Egenskap1: Verdi;
   Egenskap2: Verdi;
   Egenskap3: Verdi;
}

En tilsvarende definisjon har dere allerede støtt på i forrige veiledning.

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

Pass på å avslutte hver deklarasjon med en semikolon.

Et blikk på de tilgjengelige selektorene

Faktisk har CSS et ganske stort utvalg av selektorer, og jeg vil introdusere de viktigste for dere. For det er klart: Bare ved å beherske arbeidet med selektorer kan man fornuftig definere CSS-egenskaper.

Den enkleste måten å tildele stiler til elementer i et HTML-dokument på, er ved hjelp av Element-selektoren.

Ved å bruke følgende syntaks blir alle p-elementene tildelt fargen svart.

p { 
   color: #009966; 
}

Hvis dere vil tildele flere elementer samme stil, er det også mulig.

I dette tilfellet skriver dere bare ned de relevante elementene etter hverandre, adskilt med komma.

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

Dere kan også tildele elementer flere stiler. Stilene noteres hver for seg med en semikolon.

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

En kombinasjon av nevnte varianter er også mulig.

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

Resultatet kan se slik ut:

Områder med flere elementer

Ofte er det nødvendig å formatere et område som består av flere HTML-elementer. For slike tilfeller har HTML to spesielle elementer: span og div. Disse elementene vil dukke opp for dere - faktisk også i denne serien - gjentatte ganger.

Et eksempel:

<div class="artikkel">
  <h1>Fargeeksplosjon</h1>
  <p class="tema">En veiledning om opprettelse av fargeeksplosjon av <span class="forfatter">MarkusMelzer</span>.</p>
</div>

Den eneste forskjellen mellom div og span er at div-elementet tvinger frem en ny linje i tekstflyten. span derimot skaper ikke en ny linje. I det viste eksempelet defineres et div-område der det finnes en overskrift og en tekstavsnitt. Innenfor tekstavsnittet er det igjen et span-område.

ID- og klasseselektorer

Hittil er Element-selektorer blitt brukt. Ved det følgende eksemplet blir alle h1-overskrifter formatert ved hjelp av en slik selektor.

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

Dette er imidlertid ikke alltid ønsket på denne måten. Hva skjer for eksempel hvis dere vil tildele visse egenskaper bare til én eller noen få, men ikke alle h1-overskrifter? For slike tilfeller tilbyr CSS to muligheter, nemlig klasse- og ID-selektorer.

Med klasse-selektorer kan HTML-elementer med klasseattributter velges helt spesifikt. I det aktuelle HTML-elementet må attributtet class angis. Klassedefinisjoner begynner med en prikk.

Et eksempel:

.rød { 
   color: red; 
}

Her ble klassen rød definert. For å legge til de tildelte røde egenskapene til et HTML-element, skriver man class etterfulgt av klassenavnet.

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

ID-selektoren kan enkelt brukes på samme måte. Dere kan kjenne igjen ID-selektoren ved et dobbelthashtecken.

#toppnavigering { 
   color: blå; 
};

I dette eksempelet defineres IDen toppnavigering. Men vær oppmerksom: En ID kan faktisk bare tilordnes én gang i et dokument. Tilgangen til en definert ID-egenskap ser da slik ut:

<div id="toppnavigering">Her er navigeringen</div>

Attributet id tilordner ID-navnet. Pass på at dobbelthash ikke skrives her.





De viste opplysningene kan også kombineres med hverandre. Slik kan man for eksempel tilordne flere klasser til et HTML-element.

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

I dette eksempelet tilordnes teksten de to klassene rød og stor. Hvis du vil angi en klasse og en ID, vil det se slik ut:

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

Du kan også kombinere elementer og ID-er. Her er et eksempel:

div.navi { 
   color: blå; 
}

Dette syntaksen ville kun gjelde for div-elementer med klassen navi. p-elementer som også har klassen navi ville ikke bli berørt av dette.

I CSS finnes det en annen måte å kombinere selektorer på. Se på følgende syntaks:

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

Alle førsteoverskrifter tildeles fargen rød her. em-elementer vil derimot få fargen blå.

Ved å kombinere de to instruksjonene kan du sørge for at bare em-elementer farges blå som er innenfor h1-elementer.

h1 em { 
   color: blå; 
};

Elementnavnene noteres her uten kommaer som skiller dem.

Dette er forresten en vanlig feilfelle som selv CSS-nybegynnere kan gå i. Her er samme syntaksen, men med et komma satt:

h1, em { 
   color: blå; 
}

Hva betyr denne syntaksen? Den henvender seg til alle h1- og alle em-elementer. Dette er altså noe helt annet enn syntaksen uten komma!

En annen viktig selektor er universalselektoren. Den tillater valget av et hvilket som helst element. Denne selektoren defineres med en stjerne.

* { 
   color: rød; 
}

Ved denne syntaksen vil alle elementer farges røde. Også med denne selektoren er det visse syntaks-spesialiteter å ta hensyn til.

#mainnavi * { 
   color: rød; 
}

I dette eksempelet vil forgrunnsfargen på alle elementer innenfor elementet med ID mainnavi settes til rød. Dette gjelder imidlertid ikke for elementet i seg selv.

Hvis universalselektoren står i begynnelsen av en deklarasjon, trenger den faktisk ikke å noteres. Slik som dette for eksempel ville være unødvendig:

* p { 
   color: rød; 
}

Denne syntaksen er tilsvarende følgende:

p { 
   color: rød; 
}

I neste opplæring vil du lære om flere selektorer.