CSS vraag: Inheritance, hiërarchie

[Zippy1970]

Ik probeer met enkele CSS regels te bepalen hoe <LABEL></LABEL> elementen worden gerenderd afhankelijk van de class van z'n container. Simpel voorbeeld:

Cascading Stylesheet:

  .style1 label {
    font-size: 20pt;
    font-weight: bold;
  }
  .style2 label {
    font-size: 14pt;
    color: red;
  }

.
.

HTML:

<DIV CLASS="style1">
  <LABEL>Dit is een titel</LABEL>
  En dit niet.
</DIV>

<DIV CLASS="style2">
  <LABEL>Dit is weer een titel</LABEL>
  En dit wederom niet.
</DIV>

Dit geeft het verwachte resultaat. In het eerste blok krijgt het label een font-size van 20pt, in het tweede blok een font-size van 14pt en is de tekst rood.

Maar hier gaat het fout:

HTML:

<DIV CLASS="style1">
  <LABEL>Dit is een titel</LABEL>
  En dit niet.

  <DIV CLASS="style2">
    <LABEL>Dit is weer een titel</LABEL>
    En dit wederom niet.
  </DIV>

</DIV>

De tekst "Dit is een titel" is 20pt en in het zwart (zoals verwacht). Maar de tekst "Dit is weer een titel" is ook 20pt i.p.v. 14pt, maar wel in het rood. Dus blijkbaar krijgt de tweede label eerst de rules van style2, daarna wordt hij overschreven/aangevuld met de rules van style1.

Hoe kan ik er nou voor zorgen dat de tweede label uitsluitend de rules krijgt van style 2 (ongeacht of hij nu wel of niet genest is)?

Code kan tussen [code=taal][/] tags

[ Voor 3% gewijzigd door BtM909 op 12-10-2013 01:19 ]

[Zippy1970]

Om mijn eigen vraag te beantwoorden, dit doe je door gebruik te maken van de child-selector ">".

Dus:

code:

<STYLE>
  .style1 > label {
    font-size: 20pt;
    font-weight: bold;
  }
  .style2 > label {
    font-size: 14pt;
    color: red;
  }
</STYLE>

[crisp]

Zippy1970 schreef op vrijdag 11 oktober 2013 @ 23:45:
[...]
Maar de tekst "Dit is weer een titel" is ook 20pt i.p.v. 14pt, maar wel in het rood.

Dat is toch niet het geval. Hij is wel bold omdat die property vanuit de '.style1 label' nu ook toegepast wordt, maar hij is wel degelijk 14pt. Dus of je gebruikt een buggy browser, of je testvoorbeeld klopt niet

[jostefa]

Klik rechter muisknop op die 2e titel en dan element inspecteren. Nu zie je precies welke classes er van toepassing zijn op dat element.

[NMe]

Labels worden trouwens niet gebruikt om titels aan te geven, daar heb je h1-h6 voor, eventueel in combinatie met een header-tag. Labels zijn er om bij invoervelden aan te geven wat je er moet invullen.

HTML-tags in hoofdletters schrijven is trouwens nogal archaeïsch en wordt tegenwoordig eigenlijk niet meer gedaan.

[ Voor 22% gewijzigd door NMe op 12-10-2013 16:33 ]

[Bosmonster]

pt's zijn overigens bedoeld voor print-CSS (pt's zijn een drukwerk unit). Voor screen kun je px (of em) gebruiken.

[BeefHazard]

Pt is zo erg nog niet, maar dan kun je op zich beter beginnen met

Cascading Stylesheet:

    body
    {
        font-size: 12pt;
        font-weight: 400; /*afhankelijk van wat jij wil natuurlijk*/
    }

En vanaf daar met em's werken.

[ Voor 8% gewijzigd door BeefHazard op 14-10-2013 09:52 ]

[Bosmonster]

pt's werken ook wel, maar ze zijn niet bedoeld voor screen. Dus dan kan die het beter gelijk afleren

Met em's werken maakt zijn inheritance issues alleen maar groter, dus ook dat zou ik vooralsnog even afraden.