CSS Vererbung, bzw. Kaskadierung macht Probleme

Promaetheus

Promaetheus

Mitglied
Hallo liebe Forumskollegen!

Ich wollte für meine Navigation realisieren dass die Hauptpunkte normal, als auch aktiv und die Submenüpunkte normal als auch aktiv jeweils anders zu formatieren sind.

So habe ich es mal probiert, jedoch will das nicht so recht klappen:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body {
  color: #000000;
}

span.navig {
  display: block;
  background: #757575;
}
span.sub {
  padding-left: 20px;
  background: #C9C9C9;
}

span.navig active {
  font-weight: bold;
}

span.sub active {
  color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div style="width: 200px">
  <span class="navig">Zeile 1</span>
  <span class="navig active">Zeile 2</span>
  <span class="navig sub">Sub 1</span>
  <span class="navig sub active">Sub 2</span>
  <span class="navig sub">Sub 3</span>
  <span class="navig">Zeile 3</span>
  <span class="navig">Zeile 4</span>
  <span class="navig">Zeile 5</span>
</div>
</body>
</html>

Es übernimmt mir die aktiven Punkte für die Hauptpunkte und Submenüpunkte nicht. Könnt ihr mir da vielleicht weiterhelfen?
 
Hallo,
die richtige Schreibweise für die multiplen Klassen wäre m.E. so:
CSS: 
span.navig.active {
  font-weight: bold;
}
span.sub.active {
  color: #FFFFFF;
}
 
CSS: 
span.navig active

Diese Regel sagt sagt folgendes aus: Suche alle Element vom Typ "active" die sich in der Hierarchie unterhalb eines "span"-Elements mit der Klasse "navig" befinden.
Das gleiche Problem bei der anderen Regel. Du willst aber doch einfach nur zwei Klassen, also so

CSS: 
span.navig.active {
  font-weight: bold;
}

span.sub.active {
  color: #FFFFFF;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück