---
title: "id.klass.. Hur fungerar det??"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/145108-id-klass-hur-fungerar-det"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "learn"
published: "2006-04-05T11:35:06.000Z"
updated: "2006-04-05T14:22:42.000Z"
replies: 3
views: 461
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/145108-id-klass-hur-fungerar-det"
---

# id.klass.. Hur fungerar det??

## #1 — learn, 2006-04-05T11:35Z

Jag har upptäckt att css inte beter sig riktigt som jag vill. Om jag exempelvis har en \<div\> med id="div1" och en \<p\> med class="p1" och vill att alla "p1" som ligger i en "div1" skall se ut på ett visst sätt, hur ska jag göra?

Så här brukar jag göra: #div1.p1 { ... } och det fungerar ibland, men det händer att css:en inte fungerar om jag inte ändrar till #div1 .p1 { ... } alltså ett mellanslag mellan id och class. 

Hur ska man göra, vad beror de olika sätten på, hur ska jag tänka, vilka är reglerna och NÄR ska jag ha mellanslag och inte??

Tack! :) :)

Permalänk: https://www.webforum.nu/p/145108

## #2 — nitro2k01, 2006-04-05T11:56Z

Först och främst, du bör inte använda samma id på flera element. Följande kod fungerade för mig:

```
<style type="text/css">

.div1 .p1{color: red;}

</style>

<div class="div1">
Div1:
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p1">p1</p>
<p class="p2">p2</p>

</div>

<div class="div2">
Div2:
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p1">p1</p>
<p class="p2">p2</p>

</div>
```

Vill du specificera mer kan du även lägga till taggnamn:

```
<style type="text/css">

div.div1 p.p1{color: red;}

</style>

<div class="div1">
div med class="div1":
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p1">p1</p>
<p class="p2">p2</p>

</div>

<p class="div1">
p med class="div1":
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p1">p1</p>
<p class="p2">p2</p>

</div>
```

Permalänk: https://www.webforum.nu/p/1793790

## #3 — jarvklo, 2006-04-05T14:04Z

Hmm...

Skillnaden mellan #div1.p1 och #div1 .p1 är att:
\#div1.p1 gäller för en 

```
<div id="div1" class="p1">...</div>
```

medan 
\#div1 .p1 (med mellanslaget) gäller för 

```
<div id="div1"><div class="p1">...</div></div>
```

 eller i ditt fall, även för 

```
<div id="div1"><p class="p1">...</p></div>
```

 (sättet du skriver på gör att klasserna inte binds till något visst element, hade du skrivit t.ex. #div1 p.p1 hade det inte gällt för "div-div"-exemplet medan det gällt för "div-p"-exemplet ovan).

Sedan är, som Nitro påpekar, grundskillnaden mellan class och id att class="whatever" får förekomma på hur många element samtidigt, medan id="something" bara får finnas på exakt ett element i ett och samma dokument... Alltså id= får förekomma i flera, men du ***måste*** använda olika värden för varje id= du anänder i ett och samma dokument

När du sedan börjar kombinera olika "selektorer" med mellanslag sådär, inträder automatiskt att olika sätt att skriva dem på "skriver över" andra enligt ett visst regelverk (kallas "specificitet")... Läs mer om detta i t.ex. <http://www.stuffandnonsense.co.uk/archives/code/>
. :bire

Permalänk: https://www.webforum.nu/p/1793818

## #4 — learn, 2006-04-05T14:22Z

Man tackar nitro2k01 & jarvklo!! Nu förstår jag precis.     :bire   :bire   :bire

Permalänk: https://www.webforum.nu/p/1793825

---

Tråden på webben: https://www.webforum.nu/amne/html-css/145108-id-klass-hur-fungerar-det