Selektor

Selektorer används i CSS för att genom matchning välja ut specifika element i ett HTML-dokument. Vad man väljer ut kan variera det kan vara alltifrån att ange att ett specifik HTML-element ser ut på ett vis, till att välja det första ordet på varannan rad.

Det finns en uppsjö av selektorer som kan kombineras på många olika vis. Olika selektorer är värderade på olika sätt, så kallad specificitet. Det betyder att CSS-regler kan trumfa, och "skriva över", andra CSS-regler för att de är högre värderade. Det kan t.ex. jämföras med hur olika operander i matematiken har företräde framför andra (multiplikation före addition, o.s.v.). Olika element kan även matchas av många olika CSS-regler och därmed få egenskaper ifrån olika regler. Specificiteten avgör då vilka egenskapsvärden som blir de slutgiltiga.

Tillgängliga selektorer

Här följer de vanligaste selektorer som är tillgängliga i CSS3.

"element-namn"

Genom att ange elementtyp, d.v.s. en taggtyp, matchar man alla motsvarande HTML-element i dokumentet, t.ex.:

p {
  background-color: blue;
}

Ovanstående exempel skulle ändra alla p-element så de får blå bakgrund. I alla fall om det inte finns någon högre värderad CSS-regel som skulle trumfa denna.

*

Matchar alla HTML-element. Man bör använda detta med stor försiktighet, då den kan göra sidan långsam.

* {
  box-sizing: border-box;
}

Ovanstående skulle sätta box-sizing till den nya box-modellen på alla element.

#"idnamn"

Lägg märke till det inledande "#"-tecknet. Denna selektor matchar det HTML-element som har id satt till "idnamn". Kom ihåg att ett id enbart får användas en gång i varje HTML-dokument (visserligen tillåter de flesta webbläsare flera förekomster, men undvik det ändå!).

#toppen {
  font-size: 200%;
}

Ovanstående skulle fördubbla teckensnittsstorleken på innehållet i det element som har id satt till "toppen".

."klassnamn"

Lägg märke till den inledande punkten. Denna selektor matchar alla de HTML-element som har class satt till "klassnamn".

.viktigt {
  text-decoration: underline;
}

Ovanstående skulle göra så att alla element som har klassen "viktigt" skulle visas med understruken text.

"element 1" "element 2"

Väljer ut de element av typen "element 2" som är avkomma till "element 1".

p em {
  background-color: yellow;
  color: black;
}

Ovanstående skulle ändra färgerna på alla em-element som ligger inuti ett p.