CSS abhängig vom nachfolgenden Element definieren

14.02.2019

Während man sich im CSS über den + Selektor generell nur auf das vorhergehende Element beziehen kann, erlauben Inhaltsbereiche nun auch eine Abfrage auf nachfolgende Inhaltsbereiche

Will man z.B. den unteren Rand abhängig dem folgenden Inhaltsbereich gestalten, kann man nun über CSS einen Selektor definieren, der sich auf diesen bezieht. 

Einsatzmöglichkeiten sind:

  • abgerundete Inhaltsbereiche, abhängig vom folgenden Inhaltsbereich
  • überlappende Effekte, abhängig vom folgenden Inhaltsbereich
  • gestaltete Rahmen, abhängig vom folgenden Inhaltsbereich

Möglich ist das über die Variante elementSectionOptions_var313, welche Varianten des folgenden Inhaltsbereichs als Data-Attribut ergänzt. Diese Variante können Sie nach der Installation dann auswählen, wenn Sie in der Hauptvariante die Auswahl von Options-Varianten aktivieren.

Ist die Untervariante aktiviert oder alternativ die CSS-Only Option -w-option-addLayoutInfoOfNextElement:yes; gesetzt, kann, wie im Quelltextbeispiel zu sehen, abhängig vom nachfolgenden Inhaltsbereich formatiert werden.

Der untere Rand wird dunkel gestrichen, wenn darauf ein dunkler Inhaltsbereich folgt

&[data-layoutnext*="elementSectionBackgroundColor_var60"]{
  border-bottom:dashed 16px #444444;
}