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

Tag-selektor

En måde at anvende stilarter på er ved at bruge selve element-tagget. Stilarter angivet med en tag-selektor vil påvirke alle elementer med det pågældende tag. Dette er nyttigt for at sikre ensartet styling af elementer på tværs af hjemmesiden.

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

En mere præcis metode til at style elementer er ved at bruge klassevælgere. Disse vælgere målretter elementer med specifikke klassenavne, hvilket gør det muligt at anvende styles selektivt.

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

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

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

.text {
  property: value;
}

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

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

Klassekomposition

Det er også muligt at kombinere flere klasser på et enkelt element, hvilket gør klassekomposition til et effektivt værktøj til at anvende stilarter – adskil klassenavne med mellemrum i class-attributten.

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

Selvom det er muligt at bruge id-selectoren til styling, anbefales det generelt ikke. Id'er skal være unikke på en side, hvilket begrænser deres genbrug.

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 stilarterne:

#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 selectoreren #title, gælder kun for dette specifikke element.