För att tillämpa stilar effektivt behöver du förstå CSS-väljare, som avgör vilka HTML-element som ska stylas. Här utforskas de huvudsakliga typerna av väljare.

Taggväljare

En taggväljare riktar sig mot alla element av en viss tagg och tillämpar enhetlig stil över hela sidan.

Syntax: I HTML har vi ett p-element:

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

För att tillämpa stilar i CSS-filen används taggnamnet (p) som väljare:

p {
  property: value;
}

Kör följande exempel och se hur det fungerar.

Klassväljare

Klassväljare riktar sig mot element som delar ett klassnamn, vilket ger mer exakt kontroll.

Syntax: I HTML läggs ett class-attribut till med ett beskrivande klassnamn:

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

I CSS refereras klassnamnet med en punkt (.) för att definiera stilarna:

.text {
  property: value;
}

Kör följande exempel och observera att endast element med klassen text får dessa stilar, vilket ger mer detaljerad kontroll över din styling.

Alla element med attributet class="text" får röd text, teckenstorlek 24px och vetefärgad bakgrund. Klassnamnet text definieras i index.css med ett .-prefix.

Klasskomposition

Du kan tilldela flera klasser till ett enda element för flexibel formatering.

Syntax: Lägg till flera klassnamn på ett element i HTML:

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

Definiera sedan stilar för varje klass separat i CSS:

.text {
  property: value;
}

.font {
  property: value;
}

Låt oss köra följande exempel och se hur det fungerar. Element med både text och font klasser får de angivna stilarna.

<p>-elementet med både text och font klasser får stilar från båda selektorerna. Klassen text sätter färgen till navy, och klassen font sätter teckenstorleken till 24px.

Id-väljare

Id-väljare riktar sig mot ett unikt element. Eftersom id:n måste vara unika används denna metod sällan för styling.

Syntax: Lägg till ett id-attribut på ett element i HTML:

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

I CSS refereras id:t med ett hash-tecken (#) för att definiera stilar:

#title {
  property: value;
}

Kör följande exempel och observera hur det fungerar. Detta exempel applicerar stilar på det unika elementet med id title.

Attributet id="title" identifierar <p>-elementet unikt, och de stilar som definieras med väljaren #title gäller endast för det specifika elementet.