Modul 3

Kap 3.4 - Klasser, id och selektorstrategi

Bra selektorer gör CSS lättare att läsa, återanvända och felsöka.

Mål

  • Använda typselektorer, klassselektorer och id-selektorer.
  • Förstå gruppering, kedjeselektorer och härstammande selektorer.
  • Känna till pseudoklasser, specificitet och arv.

Typselektor

En typselektor väljer alla element av en viss typ.

p {
    line-height: 1.5;
}

Det här stycket påverkas eftersom regeln väljer alla p-element i exemplet.

Även detta stycke får samma radavstånd.

Klassselektor

Klasser kan återanvändas på många element. I CSS skrivs klasser med punkt.

<p class="intro-text">Text</p>

.intro-text {
    font-weight: 700;
}

Det här stycket har klassen intro-text och blir därför fetare.

Det här stycket saknar klassen och påverkas inte av klassregeln.

Använd gärna bindestreck i klassnamn. Undvik mellanslag om du menar ett enda klassnamn.

ID-selektor

Ett id ska vara unikt på sidan. Det kan användas för ankarlänkar, formulärkopplingar och JavaScript. I CSS skrivs id med #.

#contact-form {
    border: 1px solid #5eead4;
}

Välj klass i första hand när stilen ska kunna återanvändas.

Gruppering och DRY

Om flera selektorer ska få samma deklarationer kan du gruppera dem med kommatecken.

h1,
h2,
h3 {
    line-height: 1.15;
}

Rubriknivå 3

Rubriknivå 4

Rubriknivå 5

Rubrikerna delar samma typ av radavstånd i exemplet.

Det följer DRY-principen: Don't Repeat Yourself.

Kedja och härstamning

.card.highlight {
    border-color: orange;
}

article p {
    max-width: 70ch;
}
Det här elementet har både card och highlight, så kantlinjen blir orange.

Det här stycket ligger inuti article och påverkas av article p.

.card.highlight väljer element som har båda klasserna. article p väljer p-element som ligger någonstans inuti article.

Pseudoklasser

Pseudoklasser väljer element i ett visst tillstånd, till exempel länkar när muspekaren är över dem eller när de får tangentbordsfokus.

a:hover {
    text-decoration: underline;
}

a:focus {
    outline: 2px solid #5eead4;
}

Hovra över länken eller tabba till den för att se :hover och :focus.

Specificitet

Om flera regler påverkar samma egenskap avgör specificitet och ordning vilken som vinner. Inline-stil är stark, id är starkare än klass, och klass är starkare än typselektor. Undvik !important om du inte har en mycket tydlig anledning.