Velge Elementer på en Enkel Måte

For å bruke stiler må du angi hvilke HTML-elementer CSS skal påvirke. Dette gjøres ved hjelp av selektorer. I dette kapittelet fokuserer vi på de tre viktigste selektorene: taggselektor, klasse-selektor og id-selektor.

Taggselektor

En taggselektor retter seg mot alle elementer av en bestemt HTML-tagg.
Eksempel på HTML:

<p>It was all in my head.</p>

Eksempel på CSS:

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

Denne regelen gjelder for alle <p>-elementer på siden.

Bruk taggselektorer når du ønsker enhetlig stil for alle elementer av denne typen.

Klassevelger

En klassevelger retter seg mot elementer som deler samme klassenavn.
HTML:

<p class="text">This song is another hit.</p>

I CSS refererer du til klassenavnet med et punktum (.) for å definere stilene:

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

Kun elementer med class="text" får disse stilene.

Klassevelgere er den mest brukte typen velger i faktiske prosjekter fordi de gir fleksibel og gjenbrukbar styling.

Flere klasser

Et element kan ha mer enn én klasse.
HTML:

<p class="text font">We test multiple class names</p>

CSS:

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

Hvis et element har begge klassene, får det stiler fra begge velgerne.

Dette gjør klassebasert styling kraftig.

<p>-elementet med både text- og font-klassene mottar stiler fra begge selektorene. text-klassen setter fargen til marineblå, og font-klassen setter skriftstørrelsen til 24px.

ID-selektor

En ID-selektor retter seg mot ett unikt element.

I HTML legger du til et id-attributt på et element:

<p id="title">Choose from different themes.</p>

I CSS refererer du til ID-en med en hashtag (#) for å definere stilene:

#title {
  font-weight: 500;
  font-size: 20px;
}

ID-er må være unike på en side.

Selv om ID-er kan brukes til styling, foretrekkes klasser vanligvis for konsistens og gjenbruk.