Selektorer: Inledning

Taggar
Klasser
ID
Grupperade selektorer
Sammanhangsstyrda

Vad är selektorer?

När du med hjälp av CSS definierar hur innehållet i en tagg i HTML-koden skall visas skapar du en selektor. Medan sidan laddas i webbläsaren kommer den att anropa selektorn och innehållet visas så som du har bestämt att det skall se ut.

Ett exempel

<HTML> <HEAD> <TITLE>Selektor</TITLE> <STYLE TYPE="text/css"> .text {color:green; font-size:14pt; font-family:georgia; text-decoration: underline overline} </STYLE> </HEAD> <BODY> <P><I class="text">Kursiv stil</I> styrd av selektorn</P> <P>Vanlig text med standardutseende eller styrd av en global stilmall</P> <P class="text">Vanlig text som påverkas av selektorn</P> </BODY> </HTML>

Här är det .text som är selektorn.

Den första P-taggen visas normalt, bortsett från att den kursiva texten förändras av att jag lägger till klassanropet i I-taggen.
Den andra visas som vanligt, det vill säga så som den globala stilmallen för den här webbplatsen bestämmer att P-taggar skall visas.
Den tredje innehåller klassanropet direkt i taggen och visas som selektorn bestämmer.

Resultatet blir det här

Kursiv stil styrd av selektorn

Vanlig text med standardutseende eller styrd av en global stilmall

Vanlig text som påverkas av selektorn

I Internet Explorer visas texten med streck både under och över, medan Netscape inte klarar det övre strecket.

Tre typer

De tre typerna av selektorer används så här:

HTML-selektorer - används för att bestämma stilen på HTML-taggar. De gör att alla taggar av just den sorten får samma utseende.
Klass-selektorer - används för att bestämma stilen när du inte vill definiera om hela taggen, eller om du vill använda samma speciella utseende i flera olika typer av taggar.
ID-selektorer - utnyttjas för att bestämma stilen på objekt som får ett unikt ID, till exempel lager.

Det kan vara svårt att förstå skillnaderna så här i början, men det klarnar snart.

Taggar
Klasser
ID
Grupperade selektorer
Sammanhangsstyrda