Udvælgelse af Elementer på en Enkel Måde

For at anvende stilarter skal du angive, hvilke HTML-elementer CSS skal målrette. Dette gøres ved hjælp af selektorer. I dette kapitel fokuserer vi på de tre vigtigste selektorer: tag-selektoren, klasse-selektoren og id-selektoren.

Tag-selektor

En tag-selektor målretter alle elementer af et bestemt HTML-tag.
Eksempel på HTML:

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

Eksempel på CSS:

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

Denne regel gælder for hvert <p>-element på siden.

Brug tag-selektorer, når du ønsker ensartet styling for alle elementer af denne type.

Klassevælger

En klassevælger målretter elementer, der deler det samme klassenavn.
HTML:

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

I CSS refereres der til klassenavnet med et punktum (.) for at definere stilarterne:

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

Kun elementer med class="text" modtager disse stilarter.

Klassevælgere er den mest anvendte vælgertype i virkelige projekter, da de muliggør fleksibel og genanvendelig styling.

Flere klasser

Et element kan have mere end é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 klasser, modtager det stilarter fra begge vælgere.

Dette gør klassebaseret styling effektiv.

<p>-elementet med både text og font klasser modtager stilarter fra begge selektorer. Klassen text angiver farven til navy, og klassen font angiver skriftstørrelsen til 24px.

ID-selektor

En ID-selektor retter sig mod ét unikt element.

I HTML tilføjes et id-attribut til et element:

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

I CSS refereres ID'et med et hashtag (#) for at definere stilarterne:

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

ID'er skal være unikke på en side.

Selvom ID'er kan bruges til styling, foretrækkes klasser normalt for konsistens og genanvendelighed.