Thomas J.S.: Style-Sheets und Klassenhierarchie

Beitrag lesen

Hallo Ina!

.level1 { color:red !important; }
.level2
{
color:inherit !important;
font-weight:bold

.level21 {...}
}
---------

Es ist erlaubt blocks (sie beginnen mit { und enden mit } ) zu verschachtelt, aber es wird an den Browser scheitern.
Eine möglichkeit dieser Verschachteleung ist bei den 'at-regeln' z.B:
@media print {
@page { margin: 10% }
H1, H2, H3 { page-break-after: avoid; page-break-inside: avoid }
UL, OL, DL { page-break-before: avoid }
}

Es wäre möglich eine "Basisklasse" zu definieren und dann Unterklasse zu erstellen. Dazu müßtest du dich mit den 'inheritance' Regeln befassen (funktioniert aber nur sporadisch in dem Browser) wie Stefan es schon sagte, dann mit den diversen 'selectors'. (funktioniert ebenfalls mehr schlecht als recht)

Paar Beispiele we du verschachteln kannst:
body div {...} betrifft alle div's innerhalb von body.

div p + h6 > a[href][title="selfhtml"] span.klein  {...}
dies betrifft eine Unterklasse namens 'klein' die zum <span> Element zu geordet ist, das sich innerhalb von einem <a> element befindet, das die Attribute 'href' und 'title="selfhtml"' hat und ein 'child-element' von<h6> ist, das selbst unmittelbat auf einem <p> folg, das sich in einem <div> befindet.
Nett oder? ;-)  ...also weiter....

div.heute.morgen.gestern {....}
betrifft ein <div> das im class="" die Werte 'heute' 'morgen' und 'gestern' in irgendeine Aufreihung enthält:
zB. <div class="gestern tag woche morgen monat heute"> ist betroffen, nicht aber <div class="jahr gestern morgen"> .

Eine Kombination von den verschiedenen Selektoren ist ohne weiters möglich. Generell kann man sagen, daß die von CSS gebotene möglichkeiten fast unendlich sind, nur leider all diese schönen Dinge scheitern daran, daß die Browser sie nicht unterstützen.

Weitere Erklärungen findest du beim W3C:
http://www.w3.org/TR/REC-CSS2/

Grüße
Thomas