wie richtig referenzieren?

[Gunnar Bittersmann]

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

<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:

<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

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

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

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:

.bluball a:not(:first-of-type)::before { content: … }

oder

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