For at anvende stilarter effektivt skal du forstå CSS-selektorer, som bestemmer, hvilke HTML-elementer der skal styles. Lad os udforske de vigtigste typer af selektorer.

Tag-selektor

En tag-selektor retter sig mod alle elementer af en given tag og anvender ensartet styling på hele siden.

Syntaks: I HTML har vi et p-element:

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

For at anvende stilarter i CSS-filen bruges tag-navnet (p) som selektor:

p {
  property: value;
}

Lad os køre følgende eksempel og se, hvordan det fungerer.

Klassevælger

Klassevælgere målretter elementer, der deler et klassenavn, hvilket giver mere præcis kontrol.

Syntaks: Tilføj et class-attribut i HTML med et sigende klassenavn:

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

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

.text {
  property: value;
}

Kør følgende eksempel og observer, at kun elementer med klassen text får disse stilarter, hvilket giver dig mere detaljeret kontrol over din styling.

Alle elementer med attributten class="text" styles med rød tekst, en skrifttype på 24px og en baggrund i farven wheat. Klassenavnet text er defineret i index.css ved brug af et .-præfiks.

Klassekomposition

Du kan tildele flere klasser til et enkelt element for fleksibel styling.

Syntaks: Tilføj flere klassenavne til et element i HTML:

<p class="text font">A robot created chemicals.</p>

Definér derefter stilarter for hver klasse separat i CSS:

.text {
  property: value;
}

.font {
  property: value;
}

Lad os køre følgende eksempel og se, hvordan det fungerer. Elementer med både text og font klasser vil modtage de angivne stilarter.

<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-selector

Id-selectorer målretter et enkelt unikt element. Da id'er skal være unikke, anvendes denne metode sjældent til styling.

Syntaks: Tilføj et id-attribut til et element i HTML:

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

I CSS refereres id'et med et hashtag (#) for at definere stilarter:

#title {
  property: value;
}

Kør følgende eksempel og observer, hvordan det fungerer. Dette eksempel anvender stilarter på det unikke element med id'et title.

Attributten id="title" identificerer entydigt <p>-elementet, og de stilarter, der er defineret med #title-selector, gælder kun for dette specifikke element.