Welche Pseudoklasse benutze für meinen Link

[Rolf B]

Hallo,

zuerst ein Hinweis auf richtiges HTML:

<div class="link_wechsel">
 <ul>
  <li>
    Previos page
    <a href="Beispiel-1.html"><b>1</b></a>
    <a href="Beispiel-2.html"><b>2</b></a>
    
 </li>
</ul>

1. Dein <div> ist nicht abgeschlossen, da fehlt das Ende-Tag </div>.
2. <div class="link_wechsel"> ist Navigation. Dafür nimmt man das <nav> Element. Und beendet es mit </nav>.
3. Es ist richtig, für die Navigation eine Liste zu verwenden. Aber jeder Link muss ein eigenes Listenelement sein. Eine Liste mit nur einem Eintrag ist sinnlos.
4. Das <b> Element zu verwenden, nur um etwas fett zu machen, ist veraltet. Du hast bestimmt eine CSS Datei. Gibt den a Elementen der Navigation per CSS die Eigenschaft font-weight:bold.

Zu deiner Frage:

Es gibt keine Pseudoklasse, die erkennt, dass ein Link auf die eigene Seite zeigt. Ich habe mal gegoogelt, die Antwort lautet immer: Mach das am Server (mit PHP) oder mit JavaScript im Browser.

Um das zu lösen, muss das Listenelement mit dem Link, der zur aktuellen Seite gehört, von Dir markiert werden. Hier bietet sich ein aria-Attribut an, nämlich aria-current="page". Dann weiß ein Anwender, der schlecht sieht und einen Screenreader benutzt, auch gleich Bescheid.

Im CSS fragst Du dann so ab:

nav li[aria-current=page] {
   color: blue;
}

Die Frage ist: Wie kommt die Markierung an das <li>? Da gibt es 3 Wege:

1. Du machst es auf jeder Seite selbst
2. Du machst aus den HTML Seiten PHP Seiten und programmierst das so, dass die Navigation von PHP erzeugt wird und Du im PHP erkennst, dass es den Link auf die aktuelle Seite erzeugt.
3. Du baust JavaScript auf die HTML Seite und prüfst, ob der Seitenname aus dem href im Link gleich dem Seitennamen in window.location.href ist.

<nav class="link_wechsel">
  <ul>
    <li><a href="Beispiel-1.html">Previous page</a></li>
    <li><a href="Beispiel-1.html">1</a></li>
    <li><a aria-current="page" href="Beispiel-2.html">2</a></li>
  </ul>
</nav>

Rolf