Der der med selectors i CSS ...

[Kurt Hansen]

Jeg har aldrig fattet hvorfor der findes både . og # i CSS.

Hvad skulle formålet og fordelen ved at oprette en ID? Hvorfor ikke bare
en generel "class"?

[Kim Ludvigsen]

Post by Kurt Hansen
Jeg har aldrig fattet hvorfor der findes både . og # i CSS.
Hvad skulle formålet og fordelen ved at oprette en ID? Hvorfor ikke bare
en generel "class"?

Man kan sagtens bare nøjes med at bruge class, men ID kan også bruges
til andre ting, fx til ankre på en side. Der er også en ydelsesforskel,
hvor ID er hurtigere - det kunne gøre en forskel i gamle dage, men det
betyder ikke noget med vore dages computere.

[Bertel Lund Hansen]

Post by Kurt Hansen
Hvad skulle formålet og fordelen ved at oprette en ID? Hvorfor ikke bare
en generel "class"?

Id bruges hvor det er nødvendigt entydigt at kunne udpege et
element. Der må nemlig kun være ét element på en side med en
given id.

Desværre er browserne tolerante og behandler det som en class
hvis man genbruger en id, men til navigering på en side og til
JavaScript-funktioner er en ægte id nødvendig. Hvis man klikker
på "Billede af min moster", så nytter det ikke at det er et
tilfældigt billede der bliver vist.

Strategisk kan det også bruges hvor det ikke er strengt
nødvendigt. Hvis man har f.eks.

<div id='index'>

så fortæller det en der læser koden, at "index" er et unikt
element. Hvis man derimod har

<div class='index'>

så forventer man at der kan være flere index-elementer.
Men det er feinschmeckeri.

[Morten Bonderup]

Post by Kurt Hansen
Jeg har aldrig fattet hvorfor der findes både . og # i CSS.
Hvad skulle formålet og fordelen ved at oprette en ID? Hvorfor ikke bare
en generel "class"?

Næh, det kan du da godt have ret i, blot at bruge class. Jeg er stødt på
noget amerikansk litteratur som anbefaler at bruge class, men jeg tænker
i grunden, at udviklerens erfaring, kodestil og vaner spiller ind her.
Selv bruger jeg class, da det har den fordel at jeg, på et html element,
kan lave en class-liste og tilknytte flere regler til samme HTML
element. ID'et har jeg "reserveret" til JavaScript.

I CSS:

.baggrundsfarve {
background-color: green;
}

.tekstfarve {
color: yellow;
}


I HTML:

<h1 class="baggrundsfarve tekstfarve">Overskrift</h1>

[Bertel Lund Hansen]

Post by Morten Bonderup
element. ID'et har jeg "reserveret" til JavaScript.

Det er også nødvendigt til navigering på en side.

<a href='#kapitel1'>Kapitel 1</a>

<div id='kapitel1'>Det var en mørk og stormfuld nat ...

Her er en side hvor jeg har brugt det i en lille menu:

http://fiduso.dk/?page=sprogmeninger

[Kim Ludvigsen]

Post by Bertel Lund Hansen
Det er også nødvendigt til navigering på en side.

Det og så en tydelig og logisk opbygning af siden er vist fordelene. Men
der er åbenbart en meget stor ulempe, som jeg først er blevet opmærksom
på efter Kurts spørgsmål:

Jeg har læst, at en klasse kan ikke overskrive en ID, medmindre man
bruger !important. Jeg har flere gange gennem årene ikke kunnet forstå,
at mine CSS-ændringer via class ikke ville tage fat. Det kan så åbenbart
skyldes brugen af ID.

[Dennis Munding]

Post by Kim Ludvigsen

Post by Bertel Lund Hansen
Det er også nødvendigt til navigering på en side.

Det og så en tydelig og logisk opbygning af siden er vist fordelene.
Men der er åbenbart en meget stor ulempe, som jeg først er blevet
Jeg har læst, at en klasse kan ikke overskrive en ID, medmindre man
bruger !important. Jeg har flere gange gennem årene ikke kunnet
forstå, at mine CSS-ændringer via class ikke ville tage fat. Det kan
så åbenbart skyldes brugen af ID.

Og så bare for at "hælde lidt salt i såret"...:

Man skal også være opmærksom på hierarkiet i css...

Ja, id trumfer en class - men kun hvis de bliver hentet fra samme kilde!

Øverst i hierarkiet er inline styling.
Dernæst er det lokal styling (i head: <style type... >...</style>)
Og sidst eksterne stylesheets.

Læs mere her: https://www.w3schools.com/css/css_specificity.asp