@@petro74 > Mein Problem als echter CSS-Frischling ist das selektive Referenzieren. Selektieren wäre der richtige Begriff. Referenzieren meint auf eine Ressource zu verweisen: `href`. > ~~~HTML > <ul class="bluball"> > <li> > <span>Altmühltal</span> > <a class="list-1" href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a> > <span></span> > <a class="list-1" title="Staat" href="DE/DE.html">Deutschland</a> > <span></span> > <a class="list-1" title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a> > </li> > </ul> > ~~~ Wenn alle Geschwisterkinder gleichen Typs (hier `a`) derselben Klasse angehören, ist das ein sicheres Indiz, dass die Klasse überflüssig ist (weil eben nichts klassifiziert wird). Statt '`.list-1`' kannst du auch '`.bluball a`' selektieren. Und eine Liste mit einem Item macht auch keinen Sinn. Das sollte eher so aussehen: ~~~html <div id="bluball"> Altmühltal <a href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a> <a title="Staat" href="DE/DE.html">Deutschland</a> <a title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a> </div> ~~~ oder mit Liste ~~~html <div id="bluball"> Altmühltal <ul> <li><a href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a></li> <li><a title="Staat" href="DE/DE.html">Deutschland</a></li> <li><a title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a></li> </ul> </div> ~~~ bzw. ~~~html <div id="bluball"> <ul> <li>Altmühltal</li> <li><a href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a></li> <li><a title="Staat" href="DE/DE.html">Deutschland</a></li> <li><a title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a></li> </ul> </div> ~~~ wobei für `bluball` natürlich ein sinnvoller Name zu vergeben wäre und das `div` vielleicht lieber ein `nav`-Element wäre (hängt vom Inhalt ab, das geht aus deiner Beschreibung nicht hervor; ebensowenig ob Variante 2 oder 3 richtig wäre). > erst recht ein leerer <span>-Tag, `span`-[Element](http://meiert.com/de/publications/articles/20060924/). > Und wie bekomme ich es hin wenn <span>Altmühltal</span> alleine steht so dass nachfolgend kein Pfeil mehr angezeigt werden darf? Der Pfeil soll nur zwischen den Links erscheinen? Bei Variante 1: ~~~css .bluball a:not(:first-of-type)::before { content: … } ~~~ oder ~~~css .bluball a:not(:last-of-type)::after { content: … } ~~~ (Das hätte den unerwünschten Effekt, dass der Pfeil auch verlinkt wäre anstatt ein Trenner zu sein. Aber das solte man mit '`pointer-events: none`{: style="white-space: nowrap"}' wegbekommen.) Bei Varianten 2 und 3 entsprechend für `li`. LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)

@@petro74 > Mein Problem als echter CSS-Frischling ist das selektive Referenzieren. Selektieren wäre der richtige Begriff. Referenzieren meint auf eine Ressource zu verweisen: `href`. > ~~~HTML > <ul class="bluball"> > <li> > <span>Altmühltal</span> > <a class="list-1" href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a> > <span></span> > <a class="list-1" title="Staat" href="DE/DE.html">Deutschland</a> > <span></span> > <a class="list-1" title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a> > </li> > </ul> > ~~~ Wenn alle Geschwisterkinder gleichen Typs (hier `a`) derselben Klasse angehören, ist das ein sicheres Indiz, dass die Klasse überflüssig ist (weil eben nichts klassifiziert wird). Statt '`.list-1`' kannst du auch '`.bluball a`' selektieren. Und eine Liste mit einem Item macht auch keinen Sinn. Das sollte eher so aussehen: ~~~html <div id="bluball"> Altmühltal <a href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a> <a title="Staat" href="DE/DE.html">Deutschland</a> <a title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a> </div> ~~~ oder mit Liste ~~~html <div id="bluball"> Altmühltal <ul> <li><a href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a></li> <li><a title="Staat" href="DE/DE.html">Deutschland</a></li> <li><a title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a></li> </ul> </div> ~~~ bzw. ~~~html <div id="bluball"> <ul> <li>Altmühltal</li> <li><a href="DE-BY/DE-BY_a.html#DE-BY_a17">Detailinfo</a></li> <li><a title="Staat" href="DE/DE.html">Deutschland</a></li> <li><a title="Bundesland" href="DE-BY/DE-BY.html">Bayern</a></li> </ul> </div> ~~~ wobei für `bluball` natürlich ein sinnvoller Name zu vergeben wäre und das `div` vielleicht lieber ein `nav`-Element wäre (hängt vom Inhalt ab, das geht aus deiner Beschreibung nicht hervor; ebensowenig ob Variante 2 oder 3 richtig wäre). > erst recht ein leerer <span>-Tag, `span`-[Element](http://meiert.com/de/publications/articles/20060924/). > Und wie bekomme ich es hin wenn <span>Altmühltal</span> alleine steht so dass nachfolgend kein Pfeil mehr angezeigt werden darf? Der Pfeil soll nur zwischen den Links erscheinen? Bei Variante 1: ~~~css .bluball a:not(:first-of-type)::before { content: … } ~~~ oder ~~~css .bluball a:not(:last-of-type)::after { content: … } ~~~ (Das hätte den unerwünschten Effekt, dass der Pfeil auch verlinkt wäre anstatt ein Trenner zu sein. Aber das solte man mit `pointer-events: none` wegbekommen.) Bei Varianten 2 und 3 entsprechend für `li`. LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)