[CSS]Probleem met volgorde

[Dr_Frickin_Evil]

Stel ik heb dit:

code:

<style>
div.rood div {
color: red;
}

div.blauw {
color: blue;
}
</style>

<div class="rood">
  <div class="blauw">
  tekst
  </div>
</div>

Welke kleur moet "tekst" dan hebben? Blauw toch? Als ik dit namelijk zo uitprobeer, dan is de tekst rood. Wat ik dus wil vragen, gaat een direct aan een class toegekende waarde niet boven een georven waarde?

[ Voor 21% gewijzigd door Dr_Frickin_Evil op 30-12-2003 16:18 ]

[André]

code:

.rood div {
color: red;
}

.blauw div {
color: blue;
}

<div class="rood">
  <div class="blauw">
  tekst
  </div>
</div>

Zo bedoel je?

[Eskimootje]

mis je niet een komma tussen div.rood en div?

[coubertin119]

En als je nu

Cascading Stylesheet:

div.rood, div {
color: red;
}

div.blauw {
color: blue;
}

doet, en notice de komma, wat geeft dat dan?

---

Of bedoel je alle childs van div.rood? Dan nog zou het blauw moeten zijn, want bij mijn weten gaan specifiek toegewezen classes boven alle niet-specifiek toegewezen stijl-informatie die je toewijst met "div.rood div". Ik had het dus fout.

creative8500, uiteraard staat dat erin en je kan ook *steeds* verwijzen naar de specificaties maar in je moedertaal op een toegepaste wijze iets lezen is nog altijd leuker dan die droge specificaties in het Engels .

[ Voor 78% gewijzigd door coubertin119 op 30-12-2003 16:28 ]

[creative8500]

Het staat allemaal in de specificaties.

[Dr_Frickin_Evil]

Ik bedoel dus de childs van div.rood ja. Zoals ik het dus hierboven neergezet heb. Probeer het maar uit, de tekst wordt rood, maar ik dacht eigenlijk dat ie blauw zou moeten worden toch?

[crisp]

creative8500 schreef op 30 december 2003 @ 16:23:
Het staat allemaal in de specificaties.

inderdaad: http://www.w3.org/TR/REC-CSS2/cascade.html#specificity

div.rood div is meer specifiek dan div.blauw en krijgt dus voorrang

[Dr_Frickin_Evil]

Maf, wist ik niet. Ik vind het ook erg onlogisch.

Want stel nu dit geval:

code:

<style>
div.rood div {
color: red;
}

div.blauw {
color: blue;
}
</style>

<div class="rood">
  <div>tekst1</div>
  <div class="blauw">
  tekst2
  </div>
  <div>tekst3</div>
</div>

Ik wil tekst2 blauw en de andere 2 rood hebben, dat zou dan dus niet kunnen, of wel? Zonder die 1e en de laatste div een aparte class te geven bedoel ik dus.

[ Voor 15% gewijzigd door Dr_Frickin_Evil op 30-12-2003 16:38 ]

[crisp]

tuurlijk wel, je kan nog een extra rule opnemen:

Cascading Stylesheet:

div.blauw, div div.blauw {
  color: blue;
}

[Dr_Frickin_Evil]

hm dat werkt niet hoor.

[crisp]

Dr_Frickin_Evil schreef op 30 december 2003 @ 16:58:
hm dat werkt niet hoor.

Wel hoor, zolang hij maar onder de div.rood div definitie staat - hij heeft nu immers dezelfde specificity. Een ander alternatief is dit:

Cascading Stylesheet:

div.blauw {
  color: blue !important;
}

[Dr_Frickin_Evil]

Oke het werkt, toch blijf ik het onlogisch vinden

[Verwijderd]

Dr_Frickin_Evil schreef op 30 december 2003 @ 17:11:
Oke het werkt, toch blijf ik het onlogisch vinden

het is juist heel logisch:een specifieke regel overtreft een generieke regel; van regels die even specifiek zijn geldt de laatste. Wat is daar onlogisch aan?