Verschachtelte Listen können mitunter sehr komplex und kompliziert werden. Oft sieht die erste Ebene der Liste komplett anders aus, als alle weiteren Ebenen.


Hier ein kurzes Beispiel: Eine Main Navigation ist in der ersten Ebene horizontal ausgerichtet und das Dropdown vertikal. Die CSS für Ebene 1 und Ebene 2 sind komplett unterschiedlich.

Beispiel 1.


Ein weiteres Beispiel ist das Page Tree Macro aus Confluence bei der Scandio.

Beispiel 2.


Das Problem bei folgender Kaskade ist bekannt:

nav ul li
nav ul li ul li
nav ul li ul li ul li

Hier wirken sich die CSS Angaben aus der 1. Ebene auf die Ebenen 2 bis n aus.
Styled man jedoch die 2. Ebene, so wirken sich auf die 3. Ebene CSS Angaben aus der 1. und der 2. Ebene aus.

Für jede tiefere Ebene muss man immer mehr CSS Angaben der übergeordneten Ebene überschreiben, was letztendlich zum Chaos ausartet!


Tipp Nummer 1:

element>element Selector

Mit diesem Selector wirken sich die CSS Angaben nur auf eine Ebene der verschachtelten Listen aus. (Auf die exakte Kaskade)

//EBENE 1
nav > ul
nav > ul > li
//EBENE 2
nav > ul > li > ul
nav > ul > li > ul > li
//EBENE 3
nav > ul > li > ul > li > ul
nav > ul > li > ul > li > ul > li

Zusätzlich dazu haben wir noch einen Allgemeinen Block

nav ul
nav ul li

Alle CSS Angaben in diesem Block wirken sich auf alle ul´s und li´s aus.

Tatsächlich gibt es hier nicht so viele CSS Angaben, wenn man diese nicht in einer Unterebene überschreiben muss.

Anschließend wird die Kaskade für die 3. oder 4. Ebene wieder gelockert. (kein > Selector!)

//EBENE 4 bis n
nav > ul > li > ul > li > ul > *li ul*
nav > ul > li > ul > li > ul > *li ul li*

Wir haben die Kaskade ja “hard” gesetzt, so dass in einem Page Tree alle weiteren Ebenen unter 4 gar keine CSS Angaben hätten. (Theoretisch sollten verschachtelte Listen nicht tiefer als drei Ebenen gehen)


Hier die Default SASS Kaskaden für alle verschachtelten Listen:

nav {

  /* allgemein für alle ul li und a Elemente*/
  ul {
    li {
      a {
      }
    }
  }

  /* Level 1*/
  > ul {
    > li {
      > a {
      }
      /* Level 2*/
      > ul {
        > li {
          > a {
          }
          /* Level 3*/
          > ul {
            > li {
              > a {
              }
              /* Level 4 bis unendlich */
              ul {
                li {
                  a {
                  }
                } /* Level 4 bis unendlich Ende */
              }
            }
          } /* Level 3 Ende*/
        }
      } /* Level 2 Ende */
    }
  } /* Level 1 Ende*/

}


Tipp Nummer 2:

Bei einem Relaunch, Facelift etc. oder der Wiederverwendung in einem anderen Projekt nicht die CSS passend zum neuen Layout umschreiben!

Denn es geht viel simpler und schneller wenn man:

  1. Den ganzen Block an verschachtelten Listen auskommentiert.
  2. Die Default Kaskaden Struktur verwendet.
  3. Die brauchbaren Teile kopiert und neue Styles hinzufügt.

Ihr glaubt mir nicht? Dann probiert es aus!