Nur selektieren, wo das nächste Element = ... ist

[ebody]

Hallo,

https://codepen.io/ebody/pen/gOOQXjN

Ich möchte in einem Menü jedem Menüpunkt der ein Dropdown Menü enthält, ein Zeichen rechts neben dem Linktext mit CSS setzen. Wenn ich diesen Menüpunkten eine Klasse geben würde, wäre es kein Problem, ich würde aber gerne versuchen darauf zu verzichten.

Ist es möglich, dass ich nur die <li> mit CSS selektiere, die ein <a><ul> beinhalten, um dann mit ::after oder ::before ein Zeichen zu platzieren?

<ul id="menu">
  <li>
    <a href="#">Äpfel</a>
    <ul class="subMenu">
      <li><a href="#">Rote</a></li>
      <li><a href="#">Grüne</a></li>
      <li><a href="#">Gelbe</li>
    </ul>
  </li>
  <li><a href="#">Birnen</a></li>
  <li><a href="#">Bananen</a></li>
</ul>

li{
  list-style: none;
}

#menu > li > a::after ul.subMenu{
  content: " +";
}

/*
#menu > li > a::after + ul.subMenu{
  content: " +";
}

ul.subMenu::before{
  content: " +";
}
*/

Gruß ebody

[Matthias Apsel]

Hallo ebody,

Ist es möglich, dass ich nur die <li> mit CSS selektiere, die ein <a><ul> beinhalten, um dann mit ::after oder ::before ein Zeichen zu platzieren?

Nein, nicht mit aktuellem CSS.

Bis demnächst
Matthias

[djr]

Das li kannst Du nicht selektieren, aber das richtige a.

#menu a:not(:only-child)::after {
  content: "\A+";
}

[ebody]

Vielen Dank, funktioniert prima. Ich habe es hier nochmal angepasst und mit Kommentaren versehen: https://codepen.io/ebody/pen/gOOQXjN

Gruß ebody

[djr]

FYI: das a vor Gelbe wird, in Deinem Beispielcode, danach nicht geschlossen. Dadurch stylt mein oben geschriebener CSS anders als gewollt.

[Gunnar Bittersmann]

@@ebody

Ist es möglich, dass ich nur die <li> mit CSS selektiere, die ein <a><ul> beinhalten, um dann mit ::after oder ::before ein Zeichen zu platzieren?

Wozu brauchst du das? Es ist doch auch so zu erkennen, dass „Äpfel“ Unterpunkte hat.

Auf-/Zuklappmenü? Nur mit CSS? Funktioniert in den meisten Fällen nicht so gut. Du brauchst einen Button, der das Untermenü per JavaScript auf- und zuklappt. Der Button stellt das von dir gewünschte Zeichen dar. Siehe Menüs 3 und 4.

LLAP 🖖

[Rolf B]

Hallo ebody,

was du gesucht hättest, wäre der :has() Operator, der schon lange gewünscht wird, aber aus Performancegründen bisher von keinem Browser realisiert wurde.

Rolf