Wo im Stylesheet den in der Nav hervorgehobenen Link per Attributselektor für aria-current="page" stylen?
Die aktuelle Seite sollte in der Nav sollte durch entsprechendes CSS-Styling hervorgehoben sein. Am besten durch Styling des ebenfalls im betreff. Link notierten aria-current="page" (Attribut-Selektor). Aber wo im Stylesheet erfolgt dieses Styling? Ich hätte es intuitiv ganz normal beim Styling der gesamten Nav ergänzt, als Teil des normalen Aussehens der Nav-Links.
Ich habe lange gegoogelt und nur zwei Beispiele gefunden, die es aber am Ende des Stylings der Link-Pseudoklassen machen (link, visited, hover, focus, active), also nach active. Das hat aber doch mit den sich überschreibenden Pseudoklassen nichts zu tun?
Dort ist die Thematik erklärt: https://www.htmhell.dev/tips/the-current-page/
Es geht um den Code dort [aria-current="page"] {
font-weight: bold;
}
Wo ist dieser im Stylesheet zu notieren?
2 Antworten
Dein Gedanke ist schon einmal gut, die Regel auch dort zu schreiben, wo ähnliche Regeln für die Navigation stehen, immerhin findet man sich so immer schnell zurecht.
Die Reihenfolge der Selektoren ist nur entscheidend, wenn sie gleichwertig sind und sich deshalb gegenseitig überschreiben können. Dann wird die letzte Regel verwendet. Lies dazu hier, ebenso unter Spezifität. Falls es stärker gewichtete Selektoren gibt, musst du deinen Selektor womöglich nochmal modifizieren.
Im Webinspektor deines Browsers kannst du ebenso nachschauen, welche Regeln für welches Element gelten und sich gegenseitig überschreiben.
Bei Beispiel 1 ist es nach der Spezifität geordnet. Der Elementselektor a ist niedriger in seiner Wichtung als ein ID-Selektor (z.B. #homenav). Für die Funktionalität ist es nicht wichtig, es ist nur eine vom Autor gewählte Ordnung/Konvention, um sich schneller im eigenen CSS zurechtzufinden
Bei Beispiel 2 ist es sicherlich eine Ordnung nach folgendem Muster: Erst kommen die Regeln, die das Element selbst betreffen, dann Pseudoklassen/-elemente, dann Kombinatoren (und somit wieder höhere Spezifitäten). Du könntest ebenso nach Distanz sortieren.
Wie du es machst, ist dir überlassen.
Das heißt, es steckt bei den zwei Beispielen eigentlich gar keine bestimmte, tiefere Absicht dahinter, mit der das highlight-Styling direkt bei und mit den Pseudos und deren Reihenfolge verbunden wird.
Und ich kann das highlight-CSS in meinem Stylesheet ebenso gut 500 Zeilen höher im Stylesheet notieren, dort, wo ich das gesamte Styling der Nav habe, völlig getrennt vom Styling der 5 Pseudos (bei mir kommt das ganz unten im Stylesheet)?
Das heißt, es steckt bei den zwei Beispielen eigentlich gar keine bestimmte, tiefere Absicht dahinter, (...)
Die Autoren der Beispiele haben eine allgemeine Ordnung aller Selektoren für ihr CSS ersonnen, um sich möglichst immer gut zurechtzufinden. So wie ein Duden Wörter nach alphabetischer Reihenfolge sortiert oder ein Geschichtsbuch tendentiell bei der Steinzeit beginnt und mit der Neuzeit endet, gibt es dort ebenfalls eine Strategie. Es ändert aber nichts an der Funktionalität. Ein Selektor mit höherer Spezifität setzt sich immer durch:
<!doctype html>
<title>Example</title>
<style>
#link { color: red } /* specificity 100 */
a { color: black } /* specificity 001 */
a:hover { color: green } /* specificity 011 */
</style>
<p><a href="#" id="link">Some link</a>
Es ist vollkommen egal, in welcher Reihenfolge du die Selektoren ordnest. Der Link ist immer rot.
Wobei Beispiel 2 (das sehe ich gerade) durchaus auch eine logische Bewandnis hat, denn die Selektoren a:hover und a[aria-current="page"] sind gleichwertig.
In dem Beispiel ist es etwas anders:
<!doctype html>
<title>Example</title>
<style>
a { color: black } /* specificity 001 */
a:hover { color: green } /* specificity 011 */
a[aria-current="page"] { color: purple } /* specificity 011 */
</style>
<p><a href="#" id="link">Some link</a>
Somit setzt sich die letzte Regel durch (der Link wird violett). Setzt man die letzte Regel vor die zweite Regel, wird der Link bei Hover grün.
Und ich kann das highlight-CSS in meinem Stylesheet ebenso gut 500 Zeilen höher im Stylesheet notieren, (...)
Ja. Es sei denn, es gibt gleichwertige Selektoren, wo du die Reihenfolge berücksichtigen musst. In dem Fall musst du schauen, was du willst. Eine solche Regel:
a[aria-current="page"] { font-weight: bold } /* specificity 011 */
a:hover { font-weight: normal } /* specificity 011 */
könnte beispielsweise nicht in deinem Ansinnen sein. Oder doch? Das musst du entscheiden.
"...könnte beispielsweise nicht in deinem Ansinnen sein. Oder doch? Das musst du entscheiden."
Das wird es so wohl nicht geben, aber es ist ein interessantes Beispiel, nicht unrealistisch. Im ersten Moment wirken die Selektoren so unterschiedlich, wegen des ":hover", aber es geht ja in beiden Fällen um die gleichen Nav-Links als Selektoren. Da kann es sich tatsächlich wegen der gleichen Spezif. bei der gleichen Eigenschaft evtl. unerwünscht auswirken.
Ich fand es einfach irritierend in den zwei Beispielen, dass ein in sich geschlossenes Thema wie das Styling der 5 Link-Pseudoklassen, bei dem es ganz explizit auf die Reihenfolge untereinander ankommt, "vermengt" wird mit dem technisch anders gearteten current-Styling. "Vermengt" insofern, als das current-Styling direkt bei den Pseudo-Stylings erfolgt.
Da habe ich mich gefragt, ob das eine gute Idee ist und was evtl. dahinter steckt, weil es zum einen der relevanten Reihenfolge der 5 Pseudos stören könnte, wenn da als sechstes ein current-Styling auftaucht (das Untere überschreibt immer das Obere... blabla...).
Und zum anderen, weil ich nie auf die Idee käme, ein solches current-Styling woanders als beim gesamten Styling der Nav zu verorten. Und wenn doch woanders, dann nicht ausgerechnet bei den Pseudos mit deren sensiblen Reihenfolge.
Andererseits, wenn das current-Styling bei den Pseudos erfolgt, dann fällt einem ein mögliches Problem wie bei deinem Bsp. oben eher auf als wie wenn die beiden Stylings 500 Zeilen getrennt sind.
Ohne etwas Javascript wird das nicht funktionieren. Mir ist zumindest kein Weg bekannt, die aktuelle URL in CSS anzusprechen. Mit Javascript kannst du es so machen:
HTML
<nav class="menu">
<ul>
<li><a href="https://www.example.net/seite1">Seite 1</a></li>
<li><a href="https://www.example.net/seite2">Seite 2</a></li>
<li><a href="https://www.example.net/seite3">Seite 3</a></li>
<li><a href="https://www.example.net/seite4">Seite 4</a></li>
</ul>
</nav>
CSS
nav.menu a {
color: blue;
}
nav.menu a.active {
color: red;
}
nav.menu a.active::after {
content: " (aktiv)";
}
Javascript
document.addEventListener("DOMContentLoaded", () => {
const activeLinks = document.querySelectorAll('nav.menu a[href^="'+document.URL+'"]');
for (const link of activeLinks) {
link.classList.add("active");
link.ariaCurrent = "page";
}
});
Ergebnis
Hast du den Link angeschaut? Es geht um keinen Weg, automatisiert das Wort "aktiv" beim Styling hinter den jew. Menüpunkt zu ergänzen. Es geht um ein ganz normales Styling des betreff. Menüpunktes in der Nav, damit der User weiß "auf dieser Seite bin ich gerade". Das mache ich manuell auf jeder Seite im HTML und per CSS ganz normal im Stylesheet und das ist ganz einfach. Z.B. color: red oder font-weight: bold (mein verlinktes Bsp.).
Die Frage ist, WO im Stylesheet ich das mache. Mache ich das an der Stelle, wo üblicherweise jeder Webmaster seine Link-Pseudoklassen definiert hat? Das habe ich zwei Mal im Web so gefunden. Bei diesen Link-Pseudoklassen ist die Reihenfolge wichtig und die Hervorhebung der aktuellen Seite ist irgendwie eine etwas ähnliche Thematik, aber es ist eben keine Link-Pseudoklasse (hover, focus ect.), sondern ein ganz normale Styling einer Klasse (Attribut-Selektor). Also warum platzieren das die zwei Beispiele, die ich im Web gefunden habe, an dieser Stelle im Stylesheet, direkt bei diesen Link-Pseudoklassen, wo es ausnahmsweise im CSS mal auf die Reihenfolge ankommt (am Schluss als Letztes, nach dem active-Styling).
Hast du den Link angeschaut?
Als ich anfing meine Antwort zu schreiben, war kein Link mit dabei.
Es geht um keinen Weg, automatisiert das Wort "aktiv" beim Styling hinter den jew. Menüpunkt zu ergänzen.
Das „aktiv“ ist einfach nur ein Beispiel für das Styling. Was du da styles, ist komplett deine Sache und ich dachte, dass das selbsterklärend ist.
Die Frage ist, WO im Stylesheet ich das mache.
Und das war aus deinem Ausgangspost und ohne deine Seite oder deinen Quellcode schwer verständlich gewesen.
Das gibst du halt in deinem Stylesheet für deinen Links im Menü an:
nav a[aria-current="page"] {
font-weight: bold;
}
"Die Reihenfolge der Selektoren ist nur entscheidend, wenn sie gleichwertig sind und sich deshalb gegenseitig überschreiben können."
Ja, bei den 5 Link-Pseudoklassen ist das so, deshalb gibt es für die Reihenfolge Eselsbrücken wie loveforhate oder lieber viel fressen heute abend. Das ist dann ein CSS--"Paket" für max. alle 5 Pseudoklassen. Meistens steht das eher am Ende des Stylesheets, jedenfalls nach dem normalen Link/Nav-Styling, wo man sich aus einer ul eine ordentliche Nav zusammenbaut. So weit so gut.
So, und jetzt gibt es das CSS für "highlight the current page in your navigation bar". Das läuft zwar für den User auf eine ähnliche Sache hinaus (Link-Styling), aber es ist keine Link-Pseudoklasse und hat mit der relevanten Reihenfolge bei den 5 Pseudos nichts zu tun. Es ist eine ganz normale Klasse, 0815 sozusagen. Trotzdem stylen das aber einige direkt bei den 5 Pseudos, z.B. hier bei Option 1, wobei er keine Klasse, sondern die id "current" nimmt: https://www.websitecodetutorials.com/code/css/highlight-current-page.php
oder hier (mit aria-current):
https://cloudfour.com/thinks/when-to-nest-css/#pseudo-classes-attribute-selectors
Vielleicht stört es ja nicht, , aber ich würde das "normale" highlight-CSS nicht dort bei dem Pseudo-CSS platzieren, sondern beim normalen, gesamten Nav-Styling. Warum machen die das, hat das einen Zweck?