Div id eller div class

När bör jag använda div id och när bör jag använda div class?

id= när det bara är ett element (alltså en "grej") på sidan.
class = när flera element ska ha samma formatering.

Exempel:

<div id="container">
<p class="text">
Lorem ipsum dolor sit amet, at mollis, ut ultricies erat, at non.</p>
<p class="text">
Mus nunc nulla, cursus nunc molestie, velit sit. </p>
<p class="text">
Elit morbi duis, commodo dictumst. Sit eget, etiam hendrerit, malesuada feugiat vestibulum.</p>
</div>

Ok, tack för det men en fråga till:

I css filen..
.bredd =class
mittenbox =id
När använder jag # före?

Har jag rätt för mig..

mittenbox =id

#mittenbox

.bredd =class
#mittenbox =id

Men i vissa css filer kan en class skrivas som utan något före tex:
bredd: width 500px;
Finns det undantag?

Står det sådär i en CSS-fil är det fel.

Däremot kan det stå så här:

div	{border:1px dotted #000;}

Och i HTML-koden:

<div>Jag har en svart ram</div>

J07 skrev:

Men i vissa css filer kan en class skrivas som utan något före tex:
bredd: width 500px;
Finns det undantag?

Nej. class ska föregås av en punkt. Om det funkar utan så är det nog bara att du använder en webbläsare som är bussig mot dig.

Men sen kan man skriva class och id på fler sätt förstås. T.ex.

p .text
#container .text

Däremot står html-elementen utan något tecken innan:

body
p
h1

osv...

PS: I ditt exempel ska det vara ett kolon emellan "width" och "500px" men det kanske bara var slarv...?

I bland kan det finnas en massa blankrader innan det står som du skrev, men läs uppåt så hittar du säkert något som ser ut som
.classen{
och så kan det finnas en massa rader till bredd och efter den, kanske flera rader längre ner}
Allt mellan måsvingarna gäller för class eller div om där står #

ok, fel av mig...så stod det inte.
Vad är skillanden mellan dessa?

div.mainbg {
margin-bottom: 30px;
}

mainbg {
margin-bottom: 30px;
}

J07 skrev:

ok, fel av mig...så stod det inte.
Vad är skillanden mellan dessa?

div.mainbg {
margin-bottom: 30px;
}

mainbg {
margin-bottom: 30px;
}

Ska vara:

.mainbg {
		margin-bottom: 30px;
}

... dvs med punkt före.

Ingen praktisk skillnad.
I ena säger du: "en div som heter mainbg"
I andra säger du: "ett element som heter mainbg" (du kan sätta classen på annat än en div alltså)

Alltså: Du kanske vill ha en generell formatering med t.ex. en speciell font eller bakgrund med 25px marginaler på en mängd olika element. Du skapar en class och döper den till "foo". Du lägger till den på alla dom där elementen.

Men så ser du att just divvarna med den classen bara ska ha 10px marginaler, men för övrigt precis som classen "foo". Då kan du i stilmallen skriva:

div .foo {margin:10px}

(Med reservation för nåt fiffigt som W3C tänkt ut med det där. Det vet i så fall tanten eller zcorpan nån...)

Danne V skrev:

I ena säger du: "en div som heter mainbg"
I andra säger du: "ett element som heter mainbg" (du kan sätta classen på annat än en div alltså)

Det är snarare så att klassen som appliceras på elementen heter mainbg - i det första fallet kan den bara appliceras på div-element. I det andra alternativet kan appliceras på vilken sorts (nåja) element som helst. Vad elementen heter är irrelevant.

Eller har jag trampat i galet björnskinn med mina tappade ägg?

mvh

@nders skrev:

Det är snarare så att klassen som appliceras på elementen heter mainbg - i det första fallet kan den bara appliceras på div-element. I det andra alternativet kan appliceras på vilken sorts (nåja) element som helst. Vad elementen heter är irrelevant.

Eller har jag trampat i galet björnskinn med mina tappade ägg?

mvh

Jag tror det. Gjorde ett tillägg till mitt inlägg medan du skrev ditt.
Eller så har jag också hamnat med näsan i brevlådan.

För att komma tillbaka till ursprungsfrågan.
Det kan väl finnas en idé med classnamn på div om man t.ex ska publicera en hög med artiklar och man vill avgränsa dem från varandra och att det då dessutom blir enklare att t.ex fortsätta med sådant som p:first-child och få det utskrivet överallt.
id är för sådant som till exempel en head eller en foot. Sådant som bara ska ha ett utseende som bara gäller den diven.
Sedan kan man använda en class inne i dem i stället om det behövs.

id är för sådant som till exempel en head eller en foot.

Men egentligen funkar det lika bra att även detta markeras som class...

Men egentligen funkar det lika bra att även detta markeras som class...

Visst är det så. Men det beror nog mycket på vad man vänjer sig vid. Själv tycker jag det är mycket enklare med id på ställen som bara finns en gång på varje sida (högst), när man kanske efter något år eller så kommer tillbaka för att ändra något och vet att det bara är i t.ex id="foten" mina ändringar kommer synas. Kan på en stor site vara lite svårt att komma ihåg vart man placerade alla div med class-namn... . Kanske kommer inte ändringen fungera överallt...
Målet att sträva efter är att man bara ska behöva ändra på ett enda ställe i en extern css-fil.
Ju tydligare man är där, desto lättare har man/ eller annan, som senare, vill ändra något. Tror jag. Allt beror ju så mycket på ...

Hmm...

Man bör också tänka på att en stil i ett id har högre "specificitet" än en i en klass när det kommer till kollisioner.

Exempel: med följande CSS

#hejsan {color:red}
.hoppsan {color:blue}
div {color: yellow}

ser man effekterna i följande kod:

<div>Gissa min färg</div>
<div class="hoppsan">Gissa min färg</div> <!-- class har högre specificitet än element -->
<div id=hejsan>Gissa min färg</div> <!-- id har högre specificitet än element -->
<div id="hejsan" class="hoppsan">Gissa min färg</div> <!-- id gäller över class som gäller över element -->

Kan bli oväntade effekter annars ;)
Som i exemplet:

#mittid p {color:blue}
.minklass p {color:red}

och

<div id="mittid">
  <div class="minklass">
    <p>Gissa min färg (tips, den är *inte* röd ;) )</p>
  </div>
</div>

För den som inte är med på varför texten faktiskt blir blå trots att "klassen" ligger närmare, är nyckeln till förståelse att "ett element nånstans på vilken nivå som helst inuti ett id", tillsammans har högre specificitet än en regel för ett "element som ligger på godtycklig nivå under ett element med en klass" ;)

Man glömmer alltså lätt att "#mittid p" gäller för godtyckligt djup och att en stil satt på ett ID på så sätt kan bli *väldigt* mycket kraftfullare än en satt relaterat till en klass. ;)

lästips: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

En tumregel jag har i ryggmärgen är:
Ställ gärna in "fasta saker" (som layout-mått osv) med CSS-ID:n, men använd klasser för att definiera saker som skall variera över sidan (som färger, marginaler, paddings etc)

Lycka till :birp