nav li:first-of-type u. nav li:last-of-type

[Rolf B]

Hallo Gustav,

die Frage war:

der Unterschied zwischen nav span .visually-hidden und nav span.visually-hidden ist Dir dabei klargeworden?

Deine Antwort sagt: Nein. Aber dieser Unterschied ist absolut essenziell. Ich beschreibe es in Kurzfassung:

Der Selektor nav span .visually-hidden besteht aus drei einfachen Selektoren, die durch Leerstelle - den Nachfahren-Kombinator - zu einem verbundenen Selektor kombiniert werden (Lektüre: CSS Begriffe). Grundsätzlich gilt: einfache Selektoren beziehen sich auf ein einzelnes Element, und verbundene Selektoren bilden einen Pfad über mehrere Elemente. Der letzte einfache Selektor in einem verbundenen Selektor bezeichnet das Element, für das Eigenschaften gesetzt werden.

Die einfachen Selektoren nav und span treffen Elemente mit diesem Tag-Namen. Verbunden durch den Nachfahrenselektor trifft nav span ein span-Element, das ein nav als Vorfahr hat. Der einfache Selektor '.visually-hidden' ist ein Klassenselektor. Er ist eine Abkürzung für *.visually-hidden, das heißt: Ein Element mit beliebigem Namen und der Klasse visually-hidden. Zusammen mit dem Nachfahrenkombinator wird nach einem Element mit der Klasse visually-hidden gesucht, das ein span in seiner Vorfahrenliste hat, das ein nav in seiner Vorfahrenliste hat. Zum Beispiel so:

<nav>
   <span>
      <em class="visually-hidden">blabla</em>
   </span>
</nav>

em steht hier symbolisch für irgendein in einem Span erlaubtes Element.

Der Selektor nav span.visually-hidden hat eine Leerstelle weniger. Er besteht aus zwei einfachen Selektoren. Teil 1 ist wieder ein Element-Selektor für das nav ELement, und Teil 2 trifft ein span-Element, das die Klasse visually-hidden hat. Der verbundene Selektor findet also ein span mit Klasse visually-hidden, das ein nav in seiner Vorfahrenkette hat.

Das ist ein entscheidender Unterschied, den man unbedingt wissen muss, wenn man funktionierende CSS-Regeln verfassen können will.

Wie Gunnar anmerkte, sind beide Selektoren für den visually-hidden Zweck nicht sinnvoll. Wenn ein Element die Klasse visually-hidden bekommt, sollte es versteckt werden. Immer. Egal ob Span oder nicht. Deshalb ist der Selektor, den Du jetzt verwendest, auch die beste Lösung. .visually-hidden, ohne irgendwas davor, trifft jedes Element mit dieser Klasse.

Rolf