CSS Liste

[Rolf B]

Hallo Lowterm,

dürfte ich noch bescheiden darauf hinweisen, dass die ganzen Pixelmaße tunlichst in em notiert werden sollten?

Damit passen sie sich dynamisch an die Schriftartgröße an und das Menü skaliert besser.

Die Klasse .bg-white suggeriert, dass sie irgendwas auf weißen Hintergrund setzt. Naja, ziemlich dreckig, dieses Weiß. Aber es gibt zwei wirkliche Probleme damit:

• Das CSS tut mehr, als den Hintergrund zu setzen. Es setzt Ränder und Breiten und das Scrollverhalten. Das klingt mir jetzt sehr spezifisch für das Menü. Du solltest diese Eigenschaften in der Regel für .mymenu setzen.
• Man soll Klassen zur fachlichen Markierung von Oberflächen Elementen verwenden. Nicht zum Zuweisen einer bestimmten CSS Eigenschaftenmenge. Frameworks wie Bootstrap verhalten sich da prinzipiell konträr zu Sinn der Klassen (haben aber keine Wahl, weil Du in einer CSS Regel nicht sagen kannst: Importiere mir mal die Einstellungen aus Regel bs-col-2 oder so).
  Das heißt: wenn Du deine eigenen Stylesheets schreibst, markiere deine Oberflächenelemente nach ihrer Funktion, und style sie dann entsprechend.

Und noch eins: Wenn man ein HTML wie dieses hat

<nav>
   <div class="mymenu">
   <ul>
      <li><a>...</a></li>
      <li><a>...</a></li>
      <li><a>...</a></li>
   </ul>
  </div>
</nav>

dann braucht man nicht auf jedem Element eine Klasse, um es anzusprechen. Schau Dir im Zweifelsfall mal den Wiki-Artikel Kombinatoren an.

Die a Elemente erreichst Du im einfachsten Fall mit dem Selektor
.mymenu a
Das trifft dann alles Links in mymenu divs. Wenn Du das auf .mymenu divs in <nav> Elementen begrenzen willst, nimm halt den Elementselektor für nav dazu:
nav .mymenu a

Achte auf die Spaces, die sind relevant (der "Nachfahrenkombinator")

Willst Du nur die a Elemente ansprechen, die in Untermenüs sind, könntest Du
.mymenu ul ul a
schreiben.

Für a Elemente, die nur im obersten ul sind, könntest Du so vorgehen:
.mymenu > ul > li a Das wäre der Kind-Kombinator, der verlangt, dass die identifizierten Elemente in einer direkten Kind-Beziehung stehen müssen und nicht beliebig weit voneinander entfernte Nachfahren sein dürfen.

Ich würde sehr vermuten, dass Du mit der Klasse mymenu auskommst und den Rest mit Kombinatoren im CSS erledigen kannst.

Für "erstes" oder "letztes" Element einer Liste bieten sich die strukturellen Pseudoklassen :first-of-type und :last-of-type an.

Rolf