Daniel Petratsch: Verschachtelte CSS Formatierungen mit Klassen

Hallo!

Ich weiss nicht ob diese Frage schon mal beantwortet wurde, ich habe nur ähnliche Lösungen dazu gefunden, und zwar möchte ich gerne eine CSS Klasse definieren, die auch für verschachtelte Elemente Formatierungen vornimmt, zb ich habe eine Tabelle, der die Klasse "tbl" zugewiesen ist, wobei in der Klasse nun festgelegt ist, dass der Aussenrahmen Beispielsweise rot und die Zellenrahmen gelb sind.

Ich habe diese Css Formatierungsmethode nur für zentrale Formate gefunden, wie realisiert man das ganze mit Klassen?

Dank und
freundliche Grüsse,
Daniel

--
Das ist der ganze Jammer, die Dummen sind immer so sicher und die Gescheiten so voller Zweifel.
[Bertrand Russell]
  1. Ich habe diese Css Formatierungsmethode nur für zentrale Formate gefunden, wie realisiert man das ganze mit Klassen?

    http://selfhtml.teamone.de/css/formate/zentrale.htm#klassen

    1. Hi Linksetzer,

      Ich habe diese Css Formatierungsmethode nur für zentrale Formate gefunden, wie realisiert man das ganze mit Klassen?

      http://selfhtml.teamone.de/css/formate/zentrale.htm#klassen

      Das ist aber nicht das was ich will, das kenne ich schon, Zitat:

      "Es gibt zwei Möglichkeiten, Klassen für HTML-Elemente zu notieren: entweder für einen bestimmten HTML-Elementtyp, oder für keinen bestimmten. In jedem Fall bestimmen Sie eine Formatdefinition für eine Klasse, indem Sie im Selektor einen Punkt notieren und unmittelbar dahinter einen Namen für die Klasse angeben. Im obigen Beispiel wird mit h1.hinterlegt eine Klasse namens hinterlegt angesprochen, die aber nur für HTML-Elemente vom Typ h1 gilt: also z.B. auf HTML-Elemente wie <h1 class="hinterlegt"> anwendbar ist. Mit *.hinterlegt wird im Beispiel demonstriert, dass Sie durchaus den gleichen Klassennamen nochmal allgemein oder für andere Elemente verwenden können. Der Stern gilt als Platzhalterzeichen und bedeutet so viel wie "für alle Elemente". Er kann auch ganz entfallen. Im Beispiel .extra können Sie das sehen. Ein h1-Element erhält im Beispiel also die Formatierungen, die mit dem Selektor h1.hinterlegt bestimmt werden. Ein p-Element mit <p class="hinterlegt"> erhält dagegen die Formatierungen, die mit *.hinterlegt bestimmt weden."

      Hier wird erklärt wie man Klassen für bestimmte Elementtypen setzen kann, die halt nur dann ansprechen wenn der zu formatierende Typ gleich dem festgelegtem Typ ist, bzw für alle Elemente, wenn in der Klassendefinition keine explizite Definition vorliegt.

      Was ich aber benötige ist die Definition einer Klasse, die es mir erlaubt auch Unterelemente mitzuformatieren, wie im Beispiel der zentralen Formatierungen:

      h1 i { color:blue; font-style:normal; }

      Hier trifft die Formatierung für das <i> zb nur zu wenn es sich im Element <h1> befindet.

      freundliche Grüsse,
      Daniel

      --
      Das ist der ganze Jammer, die Dummen sind immer so sicher und die Gescheiten so voller Zweifel.
      [Bertrand Russell]
  2. Hallo,

    zb ich habe eine Tabelle, der die Klasse "tbl" zugewiesen ist, wobei in der Klasse nun festgelegt ist, dass der Aussenrahmen Beispielsweise rot und die Zellenrahmen gelb sind.

    Auch mit Klassen kann man Verschachtelungs-Selektoren basteln,
    auch wenn das in SelfHTML und in der Spec. nicht so klar rauskommt.
    http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente
    http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors

    Dein Beispiel wuerde ich wie folgt in CSS umschreiben:

    table.tbl { border:2px solid red; border-collapse:collapse; border-spacing:0; }
    table.tbl td, table.tbl th { border:2px solid yellow; }

    Oder was war doch gleich die Frage?

    mfg, Thomas

    1. Hi Thomas,

      Auch mit Klassen kann man Verschachtelungs-Selektoren basteln,
      auch wenn das in SelfHTML und in der Spec. nicht so klar rauskommt.
      http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente
      http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors

      Dein Beispiel wuerde ich wie folgt in CSS umschreiben:

      table.tbl { border:2px solid red; border-collapse:collapse; border-spacing:0; }
      table.tbl td, table.tbl th { border:2px solid yellow; }

      Oder was war doch gleich die Frage?

      Genau das wars was ich gesucht habe, ganz vieles Dank an grosses Meister :=)

      freundliche Grüsse,
      Daniel

      --
      Das ist der ganze Jammer, die Dummen sind immer so sicher und die Gescheiten so voller Zweifel.
      [Bertrand Russell]