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

7 svar · 264 visningar · startad av Jaar 10 okt. 2003

JaarMedlem sedan juli 2001434 inlägg

Frågan10 okt. 2003 11:35#1

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...

jarvkloMedlem sedan juli 20013 378 inlägg

10 okt. 2003 11:43#2

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!

JaarMedlem sedan juli 2001434 inlägg

10 okt. 2003 11:48#3

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 {
}

jarvkloMedlem sedan juli 20013 378 inlägg

10 okt. 2003 11:57#4

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 ;)

JaarMedlem sedan juli 2001434 inlägg

10 okt. 2003 12:08#5

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 :)