[CSS] Zwei Klassen gleichzeitig?

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    [CSS] Zwei Klassen gleichzeitig?

    Folgendes Problem:

    Code:
    <div class="level1">Punkt 1
  <div class="level2">Punkt 1.1</div>
</div>
<div class="level1 selected">Punkt 2
  <div class="level2">Punkt 2.1</div>
  <div class="level2 selected">Punkt 2.2</div>
  <div class="level2">Punkt 2.3</div>
</div>
    Das ist das vorgegebene - unabänderliche - HTML.

    Selektierte Punkte (inklusive Hierarchie) bekommen als zusätzliche CSS-Klasse also selected zugewiesen.

    Ich soll jetzt dafür sorgen, dass selektierte Punkte auf Ebene 1 rot hinterlegt sind, selektierte Punkte auf Ebene 2 grün.

    Code:
    .selected {
  background:red;
}
    geht logischerweise nicht, da auch Ebene 2 rot hinterlegt würde

    Code:
    .selected {
  background:red;
}

.selected .selected {
  background:#0f0;
}
    geht auch nicht und
    Code:
    .selected {
  background:red;
}

."level2 selected" {
  background:#0f0;
}
    geht auch nicht.

    Wie kann ich es anstellen, dass es im IE 6 so aussieht wie gewünscht?
    Zuletzt geändert von mrhappiness; 18.11.2005, 08:32.
    Ich denke, also bin ich. - Einige sind trotzdem...
    Stichworte: -
  • #2
    Code:
    <!DOCTYPE html
		  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<style type="text/css">
			.selected 			{	background-color: #f00; }
			.selected div		{	background-color: #fff; }
			.selected .selected {	background-color: #0f0; }
		</style>
	</head>
	<body>
		<div class="level1">Punkt 1
			<div class="level2">Punkt 1.1</div>
		</div>
		<div class="level1 selected">Punkt 2
			<div class="level2">Punkt 2.1</div>
			<div class="level2 selected">Punkt 2.2</div>
			<div class="level2">Punkt 2.3</div>
		</div>
	</body>
</html>
    TBT

    Die zwei wichtigsten Regeln für eine berufliche Karriere:
    1. Verrate niemals alles was du weißt!

    PHP 2 All • Patrizier II Browsergame

    Kommentar

    • #3
      Danke, das hatte ich schon probiert.

      Da dein Beispiel aber wie gewünscht funktioniert, hab ich mir mein HTML nochmal angeschaut und das sieht nicht so aus wie oben (hab da zu logisch gelayoutdenkt/nicht genau genug hingesehen) gepostet, sondern so:
      Code:
      <div class="level1">Punkt 1</div>
<div class="level2">Punkt 1.1</div>
<div class="level1 selected">Punkt 2</div>
<div class="level2">Punkt 2.1</div>
<div class="level2 selected">Punkt 2.2</div>
<div class="level2">Punkt 2.3</div>
      Hast du dafür, jetzt wo alle Elemente auf der gleichen Stufe im Dokumentenbaum stehen, auch eine Idee?
      Ich denke, also bin ich. - Einige sind trotzdem...

      Kommentar

      • #4
        kram, kram, buddel, wühl in der Zauberkiste










        trara!

        Code:
        <!DOCTYPE html
		  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<style type="text/css">
			.level1.selected   {   background-color: #f00; }
			.level2.selected   {   background-color: #0f0; }
		</style>
	</head>
	<body>
		<div class="level1">Punkt 1</div>
		<div class="level2">Punkt 1.1</div>
		<div class="level1 selected">Punkt 2</div>
		<div class="level2">Punkt 2.1</div>
		<div class="level2 selected">Punkt 2.2</div>
		<div class="level2">Punkt 2.3</div>
	</body>
</html>
        aber leider nicht IE tauglich, beidem sind beide Einträge grün
        Netscape Mozilla Firefox Konqueror zeigen das gewünschte Ergebniss ( Punkt 2 ist rot - Punkt 2.2 ist grün )
        TBT

        Die zwei wichtigsten Regeln für eine berufliche Karriere:
        1. Verrate niemals alles was du weißt!

        PHP 2 All • Patrizier II Browsergame

        Kommentar

        • #5
          warum arbeitest du bei sowas eigentlich nicht mit listen?

          gruß
          peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar

          • #6
            Original geschrieben von Kropff
            warum arbeitest du bei sowas eigentlich nicht mit listen?

            gruß
            peter
            mrhappiness
            Das ist das vorgegebene - unabänderliche - HTML.
            TBT

            Die zwei wichtigsten Regeln für eine berufliche Karriere:
            1. Verrate niemals alles was du weißt!

            PHP 2 All • Patrizier II Browsergame

            Kommentar

            • #7
              @Kropff
              TBTs Aussage ist nichts mehr hinzuzufügen außer
              OffTopic:
              Enjoy SAP
              Ich denke, also bin ich. - Einige sind trotzdem...

              Kommentar

              Vorherige template Weiter
              Lädt...
              X