HTML & CSS för nybörjare (del 26): Så fungerar åtkomsten med selektorerna (1)

Selektorerna bestämmer på vilket sätt CSS-stilen tilldelas HTML-elementen. Vid en motsvarande definition anger man först namnet på elementet som selektorn ska nå. Deklarationen sker sedan inom måsvingar. Inom en deklaration kan en eller flera egenskaper anges. Den allmänna syntaxen ser således ut på följande sätt:

Selektor {
   Egenskap1: Värde;
   Egenskap2: Värde;
   Egenskap3: Värde;
}

En motsvarande definition har ni redan stött på i den föregående handledningen.

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

Se till att varje deklaration avslutas med ett semikolon.

En titt på tillgängliga selektorer

I själva verket erbjuder CSS ett ganska stort antal selektorer, varav jag kommer att introducera de viktigaste för er. För det är klart: endast om man behärskar arbetet med selektorerna kan man verkligen definiera CSS-egenskaper på ett vettigt sätt.

Det enklaste sättet att tilldela stilar inom en HTML-dokument är genom Element-selektorn.

Genom följande syntax tilldelas alla p-element färgen svart.

p { 
   color: #009966; 
}

Om ni vill tilldela samma stil till flera element är det också möjligt.

I det fallet anger ni helt enkelt de berörda elementen efter varandra, åtskilda av kommatecken.

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

Ni kan också tilldela element flera stilar. I detta fall noteras stilarna var för sig åtskilda av ett semikolon.

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

En kombination av ovanstående varianter är också möjlig.

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

Resultatet kan se ut så här:

Områden med flera element

Ofta finns det ett behov av att formatera ett område som består av flera HTML-element. För sådana fall finns det i HTML två speciella element, span och div. Dessa element kommer ni att stöta på - förutom i denna serie - gång på gång.

Ett exempel:

<div class="artikel">
  <h1>Färgexplosion</h1>
  <p class="tema">En handledning om skapande av Färgexplosion av <span class="författare">Markus Melzer</span>.</p>
</div>

Det enda skillnaden mellan div och span är att div-elementet tvångsmässigt skapar en ny rad i textflödet. span skapar däremot inte en ny rad. I det visade exemplet definieras en div-sektion där en rubrik och en textavsnitt ingår. Inuti textavsnittet finns i sin tur en span-sektion.

ID- och klassselektorer

Hittills har elementselektorer använts. Genom följande exempel formateras alla h1-rubriker genom en sådan selektor.

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

Vilket naturligtvis inte alltid är önskat i denna form. Vad om till exempel om ni vill tilldela vissa egenskaper endast till en eller några av h1-rubrikerna, men inte alla? För sådana fall erbjuder CSS två alternativ, nämligen klass- och ID-selektorer.

Med klassselektorer kan HTML-element med klassattribut selekteras på ett mycket riktat sätt. I det aktuella HTML-elementet måste attributet class anges. Klassdefinitioner börjar med en punkt.

Ett exempel:

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

Här definierades klassen röd. För att lägga till de egenskaper som har fått färgen röd till ett HTML-element anger man class följt av klassnamnet.

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

ID-selektorn kan användas på ett liknande enkelt sätt. En ID-selektor känns igen genom en fyrkant.

#toppnavigering { 
   color: blå; 
};

I detta exempel definierades ID:n toppnavigering. Men akta er: Ett ID får faktiskt endast tilldelas en gång inom ett dokument. Åtkomsten till en definierad ID-egenskap ser sedan ut på följande sätt:

<div id="toppnavigering">Här finns navigeringen</div>

Attuibuten ID tilldelar man ID-namnet. Se till att inte använda dubbelkors här.





Informationen som visas kan också kombineras med varandra. Så man kan tilldela flera klasser till ett HTML-element.

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

I detta exempel tilldelas textavsnittet de två klasserna röd och storstil. Om ni vill ange en klass och ett ID, ser det ut så här:

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

Man kan också kombinera element och ID:n. Här är ett exempel:

div.navi { 
   color: blå; 
}

Denna syntax skulle bara gälla för div-element med klassen navi. p-element, som också har klassen navi, påverkas inte av detta.

I CSS finns det ännu en typ av kombination av selektorer. Titta på följande syntax:

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

I detta fall får alla rubriker av första ordningen färgen röd. em-element får däremot färgen blå.

Genom att kombinera de två instruktionerna kan man se till att bara em-elementen färgas blå som finns inuti h1-element.

h1 em { 
   color: blå; 
};

Elementnamnen skrivs här utan kommatecken mellan dem.

Detta är förresten en vanlig fälla att falla i för nybörjare inom CSS. Här är samma syntax, där emellertid ett kommatecken har placerats:

h1, em { 
   color: blå; 
}

Vad betyder denna syntax? Alla h1- och alla em-element kommer att beröras. Det är alltså helt annorlunda än syntaxen utan komma!

En annan viktig selektor är universalselektorn. Denna möjliggör valet av vilket som helst element. Denna selektor definieras med en asterisk.

* { 
   color: röd; 
}

Genom denna syntax skulle alla element färgas röda. Även med denna selektor finns det några syntaxspecifika saker att tänka på.

#mainnavi * { 
   color: röd; 
}

I detta exempel sätts förgrundsfärgen för alla element inuti elementet med ID mainnavi till rött. Det gäller emellertid inte för elementet självt.

Om universalselektorn skulle stå i början av en deklaration behövs den faktiskt inte. Något sådant här skulle alltså vara överflödigt:

* p { 
   color: röd; 
}

Denna syntax är ekvivalent med följande:

p { 
   color: röd; 
}

I nästahandledning kommer ni att lära er fler selektorer.