---
title: "Olika css-klasser beroende på förälder"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/88158-olika-css-klasser-beroende-på-förälder"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Jaar"
published: "2003-10-10T11:35:00.000Z"
updated: "2003-10-10T13:00:16.000Z"
replies: 7
views: 272
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/88158-olika-css-klasser-beroende-på-förälder"
---

# Olika css-klasser beroende på förälder

## #1 — Jaar, 2003-10-10T11:35Z

Om jag har följande kod

```
<div id="meny">
  <div id="header">Min header</div>
</div>

<div id="sida">
 <div id="header">Min stora grej på sidan</div>
</div>
```

Kan jag urskilja de olika header klasserna?
Det jag har hittat är detta (ex)..

```
#inline-list p {
	display: inline;
	}
```

Men det ändrar ju bara existerande länkar.. för om jag skriver 

```
#sida #header {
  font-weight: bold;
}

#meny #header {
  background-color: #CCCCCC;
}
```

Så blir det samma formatering på header...
Jag tror att det går (men har inte testat) att göra så här... och det kanske är så det är tänkt att man ska göra...

```
#sida.header {
  font-weight: bold;
}
```

och lägga en class på div-header taggen på sidan... men det inte riktigt samma sak...

Nån som har nåt bra tips på hur man kan göra... har försökt hitta ett svar, men finner inget...

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

## #2 — jarvklo, 2003-10-10T11:43Z

Hmm...

Du måste hur du än vill ha det göra om "header" till en klass om du kör med kod enligt exemplet...
Varje värde(namn) på ett id får bara förekomma exakt **ett** ställe i koden på en och samma sida - medans värden(namn) på klasser får förekomma på flera ställen på sidan.

Alltså:

```
<div id="meny">
  <div class="header">Min header</div>
</div>

<div id="sida">
 <div class="header">Min stora grej på sidan</div>
</div>
```

och 

```
#sida .header {
  font-weight: bold;
}

#meny .header {
  background-color: #CCCCCC;
}
```

är ett enkelt sätt att göra det du är ute efter!

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

## #3 — Jaar, 2003-10-10T11:48Z

tackar... kan man sedan skriva så här också om man vill? 

```
#sida .header .subclass {

}
```

Dvs.. fortsätta "trädet" hur långt som helst ?
Och även blanda lite...

```
#sida .header ul li .subclass {
}
```

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

## #4 — jarvklo, 2003-10-10T11:57Z

O ja!

Men tänk på att en 

```
div b {color:red }
```

även påverkar b-taggen i följande snutt:

```
<div>
<p>
<i><b>Test</b></i>
</p>
</div>
```

"sekvensen" du definierar fungerar alltså även om inte alla taggar "på vägen ner i trädet" explicit är "med" i CSS-definitionen !

Bortsett från att man ibland behöver ha koll på denna kanske lite ovanliga egenskap är det bara att tuta på med nivåer ;)

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

## #5 — Jaar, 2003-10-10T12:08Z

Mm.. detta är väl eftersom css ärver ner egenskaperna för samma tag i den ovan... tack så himla mycket för förklaringarna .. nu börjar jag ju få lite grepp om det här :)

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

## #6 — nitro2k01, 2003-10-10T12:42Z

Jag kanske har fel, men ska man inte ha kommatecken mellan namnen?

```
 
#sida, .header, ul, li, .subclass {
}
```

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

## #7 — Erik Juhlin, 2003-10-10T12:58Z

Nej, inte om man vill åstadkomma det Jaar vill åstadkomma.

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

## #8 — dectgap, 2003-10-10T13:00Z

> **nitro2k01 skrev:**
>
> Jag kanske har fel, men ska man inte ha kommatecken mellan namnen?
> 
>
>
> ```
>  
> #sida, .header, ul, li, .subclass {
> }
> ```

Om du skriver:

```
.klass1, .klass2 {
    /* kod */
}
```

kommer koden att gälla för både *klass1* och *klass2*, i vilket sammanhang som helst.

Men om du istället skriver

```
.klass1 .klass2 {
    /* kod */
}
```

kommer koden bara att gälla element med *klass2* som finns inuti ett element med *klass1*.
*klass1* kommer inte att påverkas.

Läs mer:
<http://www.w3.org/TR/REC-CSS2/selector.html>

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/88158-olika-css-klasser-beroende-på-förälder