Klasse-selector

Hej,

Vi er nået til klassevælgere, som er et af de vigtigste emner i CSS.

Vi kender klassevælgeren, fordi vi har brugt den ofte indtil nu.

I denne lektion konsoliderer vi vores viden og lærer om dens fordele i forhold til andre vælgere.

Lad os komme i gang.

Vi bruger punktum-selektoren (.) til at definere en klasseselector. Nedenfor ses en klasseselector med navnet my-class, hvor font-size-stilen er sat til 10px.

.my-class {

font-size: 10px;

}

Vi kan også definere mere end én style for en klasseselector.

.my-class {

font-size: 10px;

}

Vi kan tildele mere end én klasse til det samme element. 

I eksemplet nedenfor er der defineret to klasseselektorer med navnene el1 og el2.

Der kan føjes to eller flere klasser til class-attributten for det element, der er oprettet med p-tagget, ved at adskille dem med et mellemrum.

Du kan se, at typografierne fra de to klasser afspejles i elementet på samme tid i afsnittet Preview.

Så hvorfor skal vi vælge klasseselectoren frem for tag- og id-selectoren?

Når vi bruger tag-selectoren, kan det føre til uønskede resultater, fordi den påvirker alle elementer, der er oprettet med dette tag. Derfor bruger vi normalt disse tags, hvis der er en fælles egenskab, som alle elementer skal have.

Hvis vi for eksempel vil have, at hvert elements font family skal være 'Lato' , laver vi en definition som følger.

Vi kunne lave en elementspecifik definition med id-selectoren.

Men eftersom alle vores style-definitioner kun gælder for ét element, var vi nødt til at skrive koden om for et andet element, som vi ville vise med de samme egenskaber

Det skyldes, at der kun kan være ét element i et HTML-dokument med det samme id.

Lad os nu lære begrebet CSS-specificitet.

Lad os igen opstille et problem for bedre at forstå emnet, så lærer vi begrebet, mens vi løser problemet.

I eksemplet nedenfor

er der lavet en style-definition for p-tagget.

Der er lavet en style-definition med en klasseselector med navnet .first.

Begge selectorer valgte det samme element i vores HTML-dokument

Begge selectorer har defineret styles, der ændrer den samme farveegenskab. I dette tilfælde opstår der en konflikt.

Når vi ser på eksemplet, kan vi ud fra vores tidligere viden tro, at farven bliver rød.

Det skyldes, at begrebet cascade fortæller os, at den sidste placering i kodens rækkefølge vinder.

Der er dog en lille nuance. Hvis de har samme specificitet, vinder den sidst indlæste kode.

Det er en evaluering, der viser, hvor vigtig selectorens specificitet er for det relevante element eller de relevante elementer.

Uanset hvor den står i koden, bliver den med den højeste specificitet evalueret af browseren.

Klasseselectoren er en mere specifik definition end element-selectoren. Derfor har den en højere specificitetsrang.

Det er faktisk meget enkelt at finde ud af, hvilken selector der er mest specifik.

Da der kun er tildelt ét ID til et element, og der kun er ét af det på websiden, forventer vi, at det er selectoren med højeste prioritet.

Klasseselectorer kan derimod evalueres som mere specifikke end tag-selectorer, fordi de vælger en mere specifik gruppe end tagget.

Vi vil i eksemplet nedenfor se, at id-selectoren vinder ved at vælge det samme element med tre forskellige selectorer.

Du kan åbne den online specificitetsberegner via dette link.

Skal jeg så bruge disse beregninger hele tiden?

Selvfølgelig ikke. Der opstår ikke konflikter, når vi skriver vores kode i overensstemmelse med standarderne.

Du behøver altså ikke lave matematiske beregninger hele tiden, men når der opstår et problem, kan du få brug for denne viden til at løse det.

Tillykke. 🥳🥳🥳

Du har afsluttet lektionen Klasseselektor og CSS-specificitet.

I næste afsnit lærer vi selektortyper.

Du kan klikke for at fortsætte til næste afsnit.