[ Forrige | Indhold | Næste]

Lektion 7: Identifikation af elementer (class og id)

I denne lektion skal vi kigge nærmere på hvordan man kan bruge class og id til at specificere specielle egenskaber for udvalgte elementer.

Det er nemlig ikke altid man ønsker at en egenskab skal gælde for alle elementer. Det kunne f.eks. være at man kun ønsker at fjerne understregningen på nogle links, eller kun ønsker at én overskrift skal have en anden farve.

Denne lektion giver dig svaret ved at vise hvordan man kan give et element et unikt id, eller gruppere elementer.

• Gruppering af elementer med class
• Identifikation af element med id

Gruppering af elementer med class

For at gøre det her lidt mindre tørt, kan vi illustruere princippet med et eksempel om vin. Lad od sige at vi har nogle links til forskellige druesorter, som benyttes til henholdsvis hvidvin og rødvin - det kunne se sådan her ud:

<p>Druer til hvidvin:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>

<p>Druer til rødvin:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>

 Vis som eksempel

Lad os så sige at vi vil have linksene til hvidvin til at være gule, og linksene til rødvin til at være røde - alle andre links, som måtte være på vores side skal stadig være blå.

For at opnå dette kan vi opdele vores links i 2 kategorier. Dette gøres ved at tildele hvert link en class ved at sætte værdien af atributten class.

Lad os prøve at sætte nogle classes på eksemplet ovenfor:

<p>Druer til hvidvin:</p>
<ul>
<li><a href="ri.htm" class="hvidvin">Riesling</a></li>
<li><a href="ch.htm" class="hvidvin">Chardonnay</a></li>
<li><a href="pb.htm" class="hvidvin">Pinot Blanc</a></li>
</ul>

<p>Druer til rødvin:</p>
<ul>
<li><a href="cs.htm" class="roedvin">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="roedvin">Merlot</a></li>
<li><a href="pn.htm" class="roedvin">Pinot Noir</a></li>
</ul>

Herefter kan vi i vores Stylesheet angive specielle egenskaber for links tilhørende henholdsvis hvidvin og roedvin.

a {
	color: blue;
}
a.hvidvin {
	color: #FFBB00;
}
a.roedvin {
	color: #800000;
}

 Vis som eksempel

Det vil altså sige at man kan definere egenskaberne for elementer, som tilhører en special class, ved at benytte .classnavn i dokumentets stylesheet.

Identifikation af element med id

Udover at man kan gruppere elementer kan man få brug for at identificere ét unikt element. Dette gøres med atributten id.

Det som er specielt for atributten id er at der i det samme dokument ikke må være to elementer, som har det samme id. I et sådan tilfælde bør man istedet benytte class. Lad os prøve at kigge på et konkret eksempel på en mulig anvendelse af id:

<h1>Kapitel 1</h1>
...
<h2>Kapitel 1.1</h2>
...
<h2>Kapitel 1.2</h2>
...
<h1>Kapitel 2</h1>
...
<h2>Kapitel 2.1</h2>
...
<h3>Kapitel 2.1.2</h3>
...

Ovenstående kunne være overskrifter for et hvilket som helst dokument opdelt i kapitler eller afsnit. Det vil være meget naturligt at tildele hvert kapitel et id som følger:

<h1 id="k1">Kapitel 1</h1>
...
<h2 id="k1-1">Kapitel 1.1</h2>
...
<h2 id="k1-2">Kapitel 1.2</h2>
...
<h1 id="k2">Kapitel 2</h1>
...
<h2 id="k2-1">Kapitel 2.1</h2>
...
<h3 id="k2-1-2">Kapitel 2.1.2</h3>
...

Lad os så sige at netop overskriften for Kapitel 1.2 skal skrives med rød skrift - dette kan gøres med følgende CSS:

#k1-2 {
	color: red;
}

 Vis som eksempel

Det vil altså sige at man kan definere egenskaberne for et specifikt element ved at benytte #id i dokumentets stylesheet.

Browser-kompatibelitet

Stort set alle browsere understøtter det du lige har lært. Hvis du er i tvivl kan prøve dig frem, eller referere til nedenstående tabel:

Tabellen viser fra og med hvilken version browseren understøtter den pågældende selektor.

Opsummering

Vi har i denne lektion set på hvordan man med selektorerne class og id kan specificere egenskaber for udvalgte elementer.

I den næste lektion vil kigge nærmere på 2 HTML-elementer, som benyttes særligt meget i forbindelse med CSS - nemlig <span> og <div>.

[ Forrige | Indhold | Næste]