Engelein: In span alles außer h2 ausblenden

Beitrag lesen

<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.