CSS Tutorial

Väljare

Väljare används i CSS för att matcha HTML-element på en webbsida som ska formateras. Det finns olika typer av väljare:

  • Elementväljare Matchar HTML-element efter deras namn, t.ex. p för stycken.
  • Klassväljare Matchar HTML-element som har angetts en speciell CSS-klass, t.ex. .special för element med klassen special.
  • ID-väljare Matchar HTML-element med ett unikt id-attribut, t.ex. #header för elementet med id "header".
  • Attributväljare Matchar HTML-element baserat på deras attribut, t.ex. input[type=checkbox] för kryssrutor.
  • Universell väljare Matchar alla HTML-element, t.ex. *.
  • Ättlingväljare Matchar ett element som är en ättling till ett annat element, t.ex. div p matchar alla stycken som finns inom en div.
  • Barnväljare Matchar ett element som är ett direkt barn till ett annat element, t.ex. div > p matchar alla stycken som är direkta barn till en div.

Exempel

För att visa hur man använder väljare, här är ett CSS-exempel som formaterar alla stycken med klassen special:

.special {
  color: red;
  font-size: 16px;
}