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

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

  1. 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

    --
    Pantoffeltierchen haben keine Hobbys.
    ¯\_(ツ)_/¯
  2. Das li kannst Du nicht selektieren, aber das richtige a.

    #menu a:not(:only-child)::after {
      content: "\A+";
    }
    
    1. Vielen Dank, funktioniert prima. Ich habe es hier nochmal angepasst und mit Kommentaren versehen: https://codepen.io/ebody/pen/gOOQXjN

      Gruß ebody

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

  4. @@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 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
  5. 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

    --
    sumpsi - posui - clusi