Selectors og kaskaden
Vælg elementer med type-, class-, ID- og attribut-selectors. Forstå specificitet, nedarvning og kaskaden, så De kan forudsige, hvilke typografier der vinder.
Selectors og kaskaden er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er CSS?
CSS (Cascading Style Sheets) er sproget, der styrer den visuelle præsentation. Du skriver regler — hver regel har en selektor, der målretter elementer, og en deklarationsblok med par af egenskaber og værdier.
selector {
property: value;
another-property: value;
}Type-, klasse- og ID-selektorer
De tre grundlæggende selektorer: type målretter alle elementer med et bestemt tag (p), klasse målretter elementer med en klasse (.card), og ID målretter ét element efter id (#logo). Foretræk klasser — ID'er har meget høj specificitet.
p { color: #333; } /* type */
.card { padding: 16px; } /* class */
#logo { width: 200px; } /* ID */Attribut- og pseudoklasse-selektorer
Vælg efter attributværdi med [type="email"]. Brug pseudoklasser til tilstande: :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.
input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }Kombinatorer
Kombinatorer beskriver relationer mellem elementer: mellemrum (efterkommer), > (direkte barn), + (tilstødende søskende), ~ (generel søskende).
nav a { color: white; } /* descendant */
nav > ul { list-style: none; } /* child */
h2 + p { margin-top: 0; } /* adjacent sibling */Specificitet: Hvem vinder?
Når flere regler målretter det samme element, afgør specificiteten, hvilken regel der vinder. ID-selektorer (0,1,0,0) vinder over klasseselektorer (0,0,1,0), som vinder over typeselektorer (0,0,0,1). Inline-stilarter vinder over alle andre. !important vinder over alt — brug det kun som sidste udvej.
Beregning af specificitet
Tæl ID'er, klasser/attributter/pseudoklasser og typer separat. Sammenlign kolonne for kolonne. Eksempel: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). Den første vinder.
/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }
/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }Kaskaden: Rækkefølgen er vigtig
Når specificiteten er ens, vinder den regel, der står senere i typografiarket. Det er C'et i CSS — kaskaden. Både import- og kildeordenen har betydning.
Nedarvning
Nogle CSS-egenskaber bliver som standard nedarvet — underordnede elementer får forælderens værdi, uden at du selv angiver den. Tekstrelaterede egenskaber som color, font-family og line-height nedarves. Egenskaber for boksmodellen som margin gør ikke.
body {
font-family: 'Inter', sans-serif; /* all text inherits this */
color: #1a202c; /* all text inherits this */
}Selektorerne :is() og :where()
:is() og :where() lader dig skrive korte selektorer, der matcher ethvert element på en liste. Forskellen er, at :is() nedarver den højeste specificitet fra sine argumenter, mens :where() altid har specificiteten nul.
/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
color: inherit;
}Den universelle selektor *
Den universelle selektor * matcher alle elementer. Den bruges ofte i CSS-nulstillinger: *, *::before, *::after { box-sizing: border-box; }, hvilket gør boksmodellen langt mere forudsigelig.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}Browsernes standardtypografier
Browsere anvender deres eget standardtypografiark (user agent stylesheet) før dit. CSS-nulstillinger som normalize.css eller CSS-lag neutraliserer disse standarder, så din styling starter fra et kendt udgangspunkt.
Hurtig kontrol
Hvilken selektor har den højeste specificitet?
Opsummering: Selektorer og kaskaden
Målret elementer med type-, klasse-, ID-, attribut- og pseudoklasse-selektorer. Specificiteten løser konflikter (ID'er > klasser > typer). Kaskaden afgør uafgjorte tilfælde ved hjælp af kildeordenen. Nedarvning viderefører teksttypografier til underordnede elementer automatisk.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Selectors og kaskaden” gratis?
Ja — hele teksten til “Selectors og kaskaden” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Selectors og kaskaden”?
Vælg elementer med type-, class-, ID- og attribut-selectors. Forstå specificitet, nedarvning og kaskaden, så De kan forudsige, hvilke typografier der vinder. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Selectors og kaskaden”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Selectors og kaskaden
- Farver, typografi og box-modellen
- Display: grundlæggende block, inline, flex og grid
- Positionering: relative, absolute, fixed og sticky