Wie kann ich mithilfe von CSS Textknoten in einem Element ausblenden, während andere Elemente sichtbar bleiben?

Targeting von Textknoten innerhalb von Elementen

Mit CSS können Sie bestimmte Elemente und ihre untergeordneten Elemente formatieren. Was aber, wenn Sie diese ausblenden oder manipulieren möchten? Text innerhalb eines Elements, während die umgebenden Elemente sichtbar bleiben? Betrachten Sie diesen HTML-Code:

<div>
<p>Das Ziel besteht darin, den Text „Zum Schließen klicken“ auszublenden, ohne dass sich dies auf das Div oder den darin enthaltenen Link auswirkt.</p>
<p><strong>Sichtbarkeit nutzen</strong></p>
<p>Die Sichtbarkeitseigenschaft kann Elemente ein- oder ausblenden. Im Gegensatz zur Anzeigeeigenschaft kann die Sichtbarkeit für untergeordnete Elemente jedoch individuell festgelegt werden. Dadurch können Sie Textknoten selektiv ausblenden:</p>
<pre class="brush:php;toolbar:false">#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

In diesem Beispiel ist die Sichtbarkeit des Div (#closelink) „reduziert“, wodurch sein gesamter Inhalt, einschließlich Textknoten, ausgeblendet wird. Allerdings wird die Sichtbarkeit des Links innerhalb des Div (a) auf „sichtbar“ gesetzt, wodurch die Sichtbarkeit des übergeordneten Elements überschrieben wird und der Link und der darin enthaltene Text angezeigt werden.

Diese Technik verbirgt effektiv Textknoten, während die Sichtbarkeit von erhalten bleibt umgebende Elemente und bietet so eine schnelle und einfache Lösung für die feinkörnige Inhaltsbearbeitung in CSS.