Selektorer i CSS

En selektor velger ut HTML-elementer slik at vi kan tilordne egenskaper til elementene.

Eksempler

h1 {
	color: blue;
}

.rundKantlinje {
	border: 5px solid white;
	border-radius: 5px;
}

I CSS koden over er h1 en typeselektor. Alle elementer av typen h1 på nettsiden vil få egenskapen color satt til verdien blue.

.rundKantlinje er en punktselektor (også kalt klasseselektor). Alle HTML elementer med attributten class="rundKantlinje" vil få egenskapene border og border-radius slik som spesifisert i CSS-koden.

Typer selektorer

Vi har mange ulike typer selektorer

Spesifisitet

CSS har et hierarki^[1] av stiler. Typeselektorene html og body gjelder hele nettsiden (alt som ligger inne i body). Dersom du setter tekstfargen til blå i body med body {color: blue;} så vil dette gjelde for all tekst på siden. Men dersom du også setter p {color: green;} så vil all tekst som ligger inne i p-tagger bli grønt, mens resten av teksten blir blå. Det er fordi p er en mer spesifikk selektor enn body.

Pseudoklasser, punktselektorer, hashtagselektorer og attributtselektorer har alle høyere spesifisitet enn typeselektorer.

La oss se på et annet eksempel ↓

h1 { color: green; }
.blueText { color: blue; }

<h1>Denne teksten blir grønn</h1>
<h1 class="blueText">Denne teksten blir blå</h1>

I eksempelet ovenfor blir den første overskriften grønn. I den andre overskriften så vil begge linjene med CSS gjelde for overskriften: typeselektoren sier at teksten skal bli grønn, mens punktselektoren sier at den skal bli blå. Punktselektoren er mer spesifikk, derfor blir teksten blå.

Kombinasjon av selektorer