UL kaskadierung in smartmenu

[selfman]

Ich lese in smartmenu.org's style.css

.sm-simple > li:first-child {
  border-top: 0;
}

.sm-simple ul {
  background: rgba(179, 179, 179, 0.1);
}

.sm-simple ul a, .sm-simple ul a:hover, .sm-simple ul a:focus, .sm-simple ul a:active {
  font-size: 14px;
  border-left: 8px solid transparent;
}

.sm-simple ul ul a,
.sm-simple ul ul a:hover,
.sm-simple ul ul a:focus,
.sm-simple ul ul a:active {
  border-left: 16px solid transparent;
}

.sm-simple ul ul ul a,
.sm-simple ul ul ul a:hover,
.sm-simple ul ul ul a:focus,
.sm-simple ul ul ul a:active {
  border-left: 24px solid transparent;
}

.sm-simple ul ul ul ul a,
.sm-simple ul ul ul ul a:hover,
.sm-simple ul ul ul ul a:focus,
.sm-simple ul ul ul ul a:active {
  border-left: 32px solid transparent;
}

.sm-simple ul ul ul ul ul a,
.sm-simple ul ul ul ul ul a:hover,
.sm-simple ul ul ul ul ul a:focus,
.sm-simple ul ul ul ul ul a:active {
  border-left: 40px solid transparent;
}

Kann man uls einfach kaskadieren und so verschachtelte uls stylen ? Wo ist das dokumentiert ?

[Rolf b]

Im Prinzip hier

Ein li kann andere Listen enthalten, damit sind Listen beliebig schachtelbar.

Ein CSS Selektor muss aber nicht alle Elemente auf dem Weg zum Ziel auflisten, insofern ist

.menu ul ul ul ul a

eine auf das wesentliche (nämlich auf die 4-fache Verschachtelung) begrenzte Form von z.B.

.menu ul li ul li ul li ul li a

Rolf

[Gunnar Bittersmann]

@@selfman

Ich lese in smartmenu.org's style.css

.sm-simple > li:first-child {
  border-top: 0;
}

.sm-simple ul {
  background: rgba(179, 179, 179, 0.1);
}

.sm-simple ul a, .sm-simple ul a:hover, .sm-simple ul a:focus, .sm-simple ul a:active {
  font-size: 14px;
  border-left: 8px solid transparent;
}

.sm-simple ul ul a,
.sm-simple ul ul a:hover,
.sm-simple ul ul a:focus,
.sm-simple ul ul a:active {
  border-left: 16px solid transparent;
}

.sm-simple ul ul ul a,
.sm-simple ul ul ul a:hover,
.sm-simple ul ul ul a:focus,
.sm-simple ul ul ul a:active {
  border-left: 24px solid transparent;
}

.sm-simple ul ul ul ul a,
.sm-simple ul ul ul ul a:hover,
.sm-simple ul ul ul ul a:focus,
.sm-simple ul ul ul ul a:active {
  border-left: 32px solid transparent;
}

.sm-simple ul ul ul ul ul a,
.sm-simple ul ul ul ul ul a:hover,
.sm-simple ul ul ul ul ul a:focus,
.sm-simple ul ul ul ul ul a:active {
  border-left: 40px solid transparent;
}

Sämtliche Selektoren mit Pseudoklassen :hover, :focus, :active in diesen Regeln sind unsinnig und sollten weg.

Kann man uls einfach kaskadieren und so verschachtelte uls stylen ? Wo ist das dokumentiert ?

BTW, du plenkst.

LLAP 🖖