CSS id-väljare

Id-väljare

Id-väljare kan användas för att specificera specifika stilar för HTML-element som har ett specifikt id.

Id-väljare definieras med "#".

Nedanstående två id-väljare, den första definierar elementets färg som röd, den andra definierar elementets färg som grön:

#red {color:red;}
#green {color:green;}

I det följande HTML-koden visas p-elementet med id-attributet red som rött, medan p-elementet med id-attributet green visas som grönt.

<p id="red">Denna mening är röd.</p>
<p id="green">Denna mening är grön.</p>

Observera:Id-attribut får endast förekomma en gång i varje HTML-dokument. Vill du veta varför, vänligen se XHTML: webbplatsomstrukturering.

Id-väljare och avledande väljare

I modern layout används ofta id-väljare för att skapa avledande väljare.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Ovanstående stil tillämpas endast på stycken som finns inom element med id som sidebar. Detta element är troligen en div eller en tabellcell, även om det kan vara en tabell eller annan blockelement. Det kan till och med vara ett inlines element, som <em></em> eller <span></span>, men detta användande är ogiltigt eftersom det inte är möjligt att lägga in <p> i inlines element <span> (om du glömde orsaken, vänligen se XHTML: webbplatsomstrukturering)

En väljare, flera användningsområden

Trots att element som betecknas som sidebar endast kan förekomma en gång i dokumentet, kan denna id-väljare användas flera gånger som en avledande väljare:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Här behandlas p-elementen inom sidebar tydligt annorlunda än andra p-element på sidan, och h2-elementen inom sidebar behandlas också annorlunda än alla andra h2-element på sidan.

Enkel väljare

ID-väljare kan fungera oberoende även om den inte används för att skapa avledande väljare:

#sidebar {
	border: 1px punktlinje #000;
	padding: 10px;
	}

Enligt denna regel kommer element med id 'sidebar' att ha en punktlinje kant med en pixel bredd i svart, samt 10 pixel inre marginal (padding, intern tomrum). Äldre versioner av Windows/IE-webbläsare kan ignorera denna regel, om du inte särskilt definierar vilken element som tillhör denna väljare:

div#sidebar {
	border: 1px punktlinje #000;
	padding: 10px;
	}

Relaterat innehåll

Om du behöver lära dig mer om ID-väljare, läs CodeW3C.coms avancerade tutorial:Detaljerad förklaring av CSS id-väljare.