CSS-selektorer

søndag, 29 september, 2019

Selektorer (eng. selectors) benytter vi for å referere til elementer i HTML-dokumentet i CSS-koden. Vi har primært tre forskjellige måter å gjøre dette på.

ID

ID er den mest spesifikke varianten, og du bruker denne selektoren når du skal referere til ett element i HTML-koden vår. Et eksempel på dette kan være logoen på en nettside. Logoen forekommer ofte én gang på nettsiden, og får derfor en ID.

I HTML bruker du attributtet id, og dette attributtet kan brukes på ulike HTML-tagger.

<img src="images/logo.png" id="logo">

I CSS-stilarket kan du referere til IDen ved å sette nummertegn (samme som brukes for hæsjtagg) foran. Her settes vidden på logoen til 100 piksler.

#logo {
width: 100px;
}

Klasse

Klasser bruker du når det er flere elementer som skal ha samme stil. Et eksempel på dette kan være om man skal lage en oversikt over personer, og trenger en stil for alle profilbildene.

I HTML bruker du attributtet class, og dette attributtet kan brukes på ulike HTML-tagger.

<img src="images/profilbilde.png" class="profilbilde">

I CSS-stilarket kan du referere til klassen ved å sette punktum foran klassenavnet. Her settes vidden på profilbildene til 100 piksler.

.profilbilde {
width: 100px;
}

HTML-tagg

Å benytte HTML-tagg som selektor er den minst spesifikke måten å referere til et element i HTML-koden. Dersom vi velger å referere til en HTML-tagg vil vi referere til alle stedene denne HTML-taggen er benytte. På denne måten kan vi sette samme stilen på alle like HTML-tagger.

<img src="images/bilde.png">

I CSS-stilarket kan du referere til en HTML-tagg ved å skrive inn navnet på HTML-taggen. Her settes vidden på alle bilder t il 100 piksler.

img {
width: 100px;
}

---