Klassen von Elternelementen über CSS setzen

17. Apr 2013

Klassen lassen sich nicht nur im HTML ergänzen, sondern auch direkt im CSS. Inzwischen können auch Klassen von Elternelementen über CSS ergänzt werden.

Klassen lassen sich nicht nur im HTML ergänzen, sondern auch direkt im CSS. Inzwischen können auch Klassen von Elternelementen über CSS ergänzt werden.

Bereits im Artikel jQuery direkt über CSS ansteuern wurde aufgezeigt, wie man das dynamische Setzen von Klassen über CSS nutzen kann, um jQuery ohne Template-Anpassungen zu steuern. Diese Technologie dient sozusagen als CSS-Schnittstelle zu jQuery sowie zu JavaScript im Allgemeinen. Aber auch ohne JavaScript-Bezug lassen sich Klassen über CSS sinnvoll ergänzen. Ein Beispiel hierfür ist das Anpassen von CSS abhängig von eingesetzten Layout-Varianten.

Umschließende Elemente dynamisch formatieren

Nehmen wir an, Sie wollen eine Listendarstellung so gestalten, dass Sie die CSS-Definition des umschließenden Elementes ebenfalls anpassen müssen, allerdings nur für dieses spezielle Element. Dem Element über dessen Selektor eine CSS-Eigenschaft zu geben ist nicht machbar, da sich diese Anpassung auf alle Elemente auswirken würde. In diesem Fall können Sie dem umschließenden Element exklusiv eine zusätzliche Klasse hinzufügen, um den gewünschten Effekt zu erzielen. Diese Klasse wird im Beispiel nur ergänzt, wenn sich im Element die Variante 24 des Banner-Weblics befindet.

Ergänzt das umschließende Element um die Klasse overflowVisible

.listBannerSlider_var24 {-w-add-classes:parent=overflowVisible;...