Selektorer

Typer av selektorer

För att tillämpa CSS på ett element måste du först visa vilket element du vill påverka. Detta görs med något som kallas för en selektor. Selektorn är alltså det som väljer vad som ska påverkas av den styling du sätter. CSS kan göra detta på ett antal olika sätt, nedan går vi igenom de vanligaste och viktigaste sätten att jobba med selektorer.

Vi har stött på selektorer redan, de är den första delen av en css-regel. Alltså det som står innan den första klammerparentesen. Ex:

h1 {
 color:red;
}

Gruppering av selektorer

Vill ni ha samma stilformateringar på mer än en selektorer så går de att gruppera på följande sätt:

h1, h2 {
 color:red;
}

Universal-selektor

Den universala selektorn innebär egentligen allt. Skriver man bara den så påverkas alltså samtliga selektorer. Det kan vara bra för att bestämma ett startvärde (eller nollvärde) som ska gälla för alla element på sidan.

* {
 color:red;
}

Typ-selektorer

Matchar direkt mot alla HTML-element av den valda typen. Här skriver man bara namnet på den tagg som man vill påverka.

h1 {
 color:red;
}

Klass-selektorer

En sida kan ha ett eller flera HTML-element med attributet class. Klass-selektorn matchar alla element (vilket kan vara olika typer av element) som har den klassen applicerad på sig. Du väljer själv vad klassen ska heta, men undvik ÅÄÖ och mellanslag.

Har vi följande kod i HTML

<div class="minklass"></div>
<p class="minklass"></p>

och skriver så här i CSS

.minklass {
 color:red;
}

Så kommer all text, inom de HTML-element som har attributet class med attributvärde 'minklass', bli röd.

Observera att . bara används i CSS och inte HTML. Detta beror på att punkttecken instruerar CSS att det är en klass-selektor. Detta är ett vanligt mönster i CSS, där ett specialtecken, eller en uppsättning tecken, används för att definiera olika selektortyper.

Det går även att ha flera klasser till samma html-element. Följande är ett exempel från den här sidan. Separera bara dessa med ett mellanslag inom klassattributet på följande sätt:

<div class="example htmlcode></div>

Detta är anledningen till att vi inte kan använda mellanslag i våra klassnamn, de räknas då som två olika klassnamn.

På den här sidan används 'example' för att formatera upp alla rutor och text, medan 'htmlcode' (eller klassen 'csscode') används för att skilja HTML och CSS exemplen åt.

ID-selektorer

Id-selektorer har egentligen precis samma funktion som klass-selektorerna. Skillnaden är att den får bara förekomma en gång per sida. En analogi är att klass-selektorer är som era förnamn. Hur många som helst kan döpas till Johan medans ID-selektorer är som ert personnummer. Det är unikt. De används ofta för att bygga upp grunden i er webbplats och det är också värt att komma ihåg att de har ett mycket högre specificitetsvärde än klasser (100 mot 10) så de prioriteras högre. Läs mer om specificitetsvärden här.

Om vi har följande kod i HTML

<div id="mittid"></div>
<p id="annatid"></p>

och skrivit så här i CSS

#mittid {
 color:red;
}
#annatid {
 color:orange;
}

I CSS så väljer man specifika id-namn med hjälp av tecknet #.

Attributselektorer

Det går även att välja specifika attribut på HTML-element på följande sätt:

a[href] {
 color:red;
}

Detta väljer alla <a> med attributet href (vilket alltid borde finnas i en <a>). Men vill man bara välja vissa länkar kan man vara ännu mer specifikt:

a[href="http://www.google.com"] {
 color:red;
}

Detta kommer ju då att bara välja den länken som går till www.google.com.

Pseudoklasser och element

Dessa selektorer gör att man kan välja element beroende på hur de har påverkats av något som användaren gör (till exempel för muspekaren över ett område på sidan) eller i vissa fall utöka redan skapade element med tillägg till hur de visas på skärmen. De kan också användas för att skapa olika utseenden på element utifrån hur många element av en viss typ som finns, eller i vilken ordening de finns på sidan. Detta innebär att varannan rad i en tabell kan få en annan bakgrundsfärg eller att den första paragrafen i ett stycke visas i en annan stil än resten av paragraferna.

Pseudo-klasser

Pseudo-klasser formaterar element utifrån vilket tillstånd de har. Pseudoklassen :hover påverkar till exempel ett element när muspekaren förs över den. pseudo

a:hover {
 color:red;
}

Om man har flera element inom att annat element så kan man använda pseudo-klasser för att formatera specifika element.

<div>
 <p>Jag är paragraf 1</p>
 <p>Jag är paragraf 2</p>
 <p>Jag är paragraf 3</p>
</div>

Här kan vi välja att ändra färgen på den första paragrafen (om den samtidigt är första barnet till ett element) genom att skriva:

p:first-child {
 color:red;
}

Det finns ganska många olika pseudo-klasser som många gånger kan kombineras för att skapa intressanta effekter.

Här hittar ni information om samtliga Pseudo-klasser.

Pseudo-element

Pseudo-element väljer en viss del av ett element snarare än själva elementet. Till exempel, ::first-line väljer alltid den första textraden inuti ett element (<p> i exemplet nedan)

p::first-line{
 color:red;
}

Det finns även pseudo-element som lägger till information till ett befintligt element som t.ex. ::before och ::after. Ett annat exempel är ::marker som man kan använda på listor för att ändra på hur punkter eller siffror ska se ut i listan, eller ::placeholder för att förändra "spöktexten" i ett <input>-element.

Här hittar ni en lista på nuvarande Pseudo-element.

Det finns en enorm potential att variera utseendet och beteendet med hjälp av dessa pseudo element/klasser så det är väl värt att lära sig hur majoriteten av dem fungerar. Som ett exempel så har ::after använts på exempelrutorna på den här sidan för att lägga till antingen texten "CSS" eller "HTML" till höger i rutorna beroende på vilken kod det rör sig om.

Kombinatorer

Det finns ett flertal kombinatorer i CSS. Dessa används för att välja specifika taggar som ligger i relation till andra taggar. Här är de absolut vanligaste:

Descendant combinator (Ättlingar)

Väljer alla element av en viss typ som ligger inom ett annat element. Decendants kan översättas till "ättlingar" på svenska. Detta innebär att alla element av den typen som listas sist i deklarationen kommer att påverkas, även om de ligger inuti andra element. Elementen separeras med mellanslag. Lättast är att läsa den baklänges. Exempelvis alla <p> inom <div> vilket skrivs:

div p {
 color: red;
}
div p blockquote{
 color: green;
}

Det första gör att alla <p> som finns inuti ett <div>-element (oavsett om det ligger direkt under eller inuti ytterligare element) kommer att färgas röda. Men endast <blockquote>-element som ligger inom en <p> som ligger inom en <div> kommer att färgas grön.

Child combinator (Barn)

Child-elemnt är sådan taggar som är "barn" till ett annat element. Det vill säga att de ligger direkt under ett annat element. Separeras med >. Lättast är att läsa den baklänges. Exempelvis alla <p> direkt under <div> vilket skrivs:

div > p {
 color:red
}

För att förtydliga, se följande HTML-kod kopplad till ovanstående CSS:

<div>
 <p>Jag blir röd</p>
 <span><p>jag blir inte röd, eftersom jag ligger inte direkt under div utom i span</p></span>
</div>

Om man i detta exemplet hade använt en decendant combinator så hade båda paragraferna blivit röda.

Här kan ni lära er mer om kombinatorer.

Sammansatta selektorer

Det går att sätta ihop en del selektorer direkt med varandra. Det ökar specificiteten och vi kan komma åt specifika elementtyper trots att de har ex. samma klass. Vill vi exempelvis välja alla länkar med klassen minklass så skriver vi en sammansatt selektor på följande sätt:

a.minklass {
 color:red
}

Detta kan användas om klassen .minklass används på ett flertal olika element men man vill göra en förändring för just <a>-element med den klassen.

Selektorer är en stor del till att CSS är så användbart till att formge sina hemsidor. Genom att behärska hur dessa olika selektorer fungerar och ett smart användande av class- och id-attribut så behöver inte strukturen i HTML bli så komplicerad. Den här sidan (W3Schools) är en bra referenssida för alla typer av selectorer.