In span alles außer h2 ausblenden

[cbatik]

Hallo!

Ich habe in meinem Dokument folgenden Struktur:

<span class="clicktext"><h2>Noch eine Überschrift mit H2 mit class "hide"</h2><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p></span>

Standardmäßig sollen alle Elemente im span-Element mit der Klasse "clicktext" ausgeblendet werden, außer das H2-Tag - das soll stehen bleiben und immer sichtbar sein. Wie ist das anzustellen?

Mein, meiner Meinung nach sinnvollster, Versuch war folgender:

.tabtext { display: none; }
.tabtext h2 (display: block; }

Leider wird aber das h2-Elemnt trotzdem ausgeblendet. Wir schaffe ich es also, alles außer ein bestimmtes Element auszublenden?

Die Variante

.tabtext p, .tabtext img, .tabtext a, tabtext table, ... { display: none; }
.tabtext h2 (display: block; }

kommt leider nicht in Frage, da ich die Inhalte wieder per JavaScript ansprechen muss, und das sonst zu kompliziert wird (zB Unterscheidung welches Element ist inline, welches ist block, etc.)

Danke, LG
Christoph

[Auge]

Hallo

Ich habe in meinem Dokument folgenden Struktur:

<span class="clicktext"><h2>Noch eine Überschrift mit H2 mit class "hide"</h2><p>Ut wisi enim ad minim veniam, ...e</p><p>Ut wisi enim ad minim veniam, ...</p><p>Ut wisi enim ad minim veniam, ...</p></span>

Standardmäßig sollen alle Elemente im span-Element mit der Klasse "clicktext" ausgeblendet werden, außer das H2-Tag - das soll stehen bleiben und immer sichtbar sein. Wie ist das anzustellen?

Die Variante

.tabtext p, .tabtext img, .tabtext a, tabtext table, ... { display: none; }
.tabtext h2 (display: block; }

kommt leider nicht in Frage, da ...

Sie funktioniert aber?

... das sonst zu kompliziert wird (zB Unterscheidung welches Element ist inline, welches ist block, etc.)

Wenn dich das kümmert, warum packst du dann Blockelemente (<h2>, <p>) verbotenerweise in ein Inlineelement (<span>).

Tschö, Auge

[Engelein]

<span class="clicktext"><h2>Noch eine Überschrift mit H2 mit class "hide"</h2><p>

Das ist schon mal insofern falsch, als dass in einem <span>-Element keine Blockelemente auftreten dürfen. Hier gehört ein <div> hin.

Mein, meiner Meinung nach sinnvollster, Versuch war folgender:

.tabtext { display: none; }
.tabtext h2 (display: block; }

Leider wird aber das h2-Elemnt trotzdem ausgeblendet.

Logisch, wenn du das übergeordnete Element ausblendest, wie soll dann ein untergeordnetes eingeblendet sein? Das ist ungefähr so, als wenn du das Marmeladenglas wegstellst, aber die Marmelade soll auf dem Tisch bleiben.

.tabtext p, .tabtext img, .tabtext a, tabtext table, ... { display: none; }
.tabtext h2 (display: block; }

kommt leider nicht in Frage, da ich die Inhalte wieder per JavaScript ansprechen muss, und das sonst zu kompliziert wird (zB Unterscheidung welches Element ist inline, welches ist block, etc.)

Mal abgesehen davon, dass das mit .tabtext * CSS-seitig einfacher ginge, gibt es nur die Möglichkeit, alle dem <h2> folgenden Elemente in einem weiteren <div> (nicht <span>) zu parken.