Auftrag für Bezahlung

[Rolf B]

Hallo einsiedler,

im Moment sehe ich in der Browser-Konsole:

(index):166 Uncaught ReferenceError: init is not defined

Das ist die Registrierung des DOMContentLoaded Events, er findet keine Funktion namens init.

Ich hoffe dann ist: .treeitem + [aria-expanded="true"]::before { /* awesome */ } richtig oder?

Deine CSS Selektoren müssen einfach zu deinem Markup passen. Der richtige Einsatz oder Nichteinsatz von Kombinatoren ergibt sich daraus automatisch. Du guckst Dein Markup an, und musst eine Kette von Bedingungen aufstellen, wie Du die Elemente, die du stylen willst, eindeutig beschreibst. Letztlich schreibst Du dem Browser eine "Wegbeschreibung".

Im Fall von .treeitemmain hast Du es (fast) richtig gemacht. Das Markup sieht so aus:

	<li role="treeitem">
		<button class="treeitemmain hidden" aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button>
			<ul class="group" role="group">
				<li role="treeitem">...</li>
				<li role="treeitem">...</li>
				<li role="treeitem">...</li>
			</ul>
	</li>

Was hier nur fast richtig ist, ist die Einrückung. Das <ul> ist gegenüber dem <button> eingerückt und erweckt damit den Eindruck, Child-Element des Buttons zu sein. Ist es aber nicht. Nimm diese <ul> Gruppe besser einen Tab-Schritt zurück.

In deinem CSS steht:

.treeitemmain[aria-expanded="false"] + ul.group

Das sagt dem Browser: Suche nach einem Element mit Klasse treeitemmain und dem Attribut aria-expanded="false". Suche für dieses Element einen "rechten Nachbarn" (also: ein Element, das in der Child-Liste des Elternelements nachfolgt), der ein ul-Element mit Klasse group ist. Das passt, der Button mit treeitemmain und das ul Element sind Nachbarn.

Das hier:

.treeitem + [aria-expanded="true"]::before

wäre falsch, weil Du ja nicht dem Nachbarn des .treeitem ein ::before-Element verpassen willst, sondern dem Tree-Item selbst. Deswegen ist es richtig, dass Du in deinem aktuellen Code das + und die Leerstellen entfernt hast.

Rolf