Ich habe eine Frage zur Kaskade(?)/Spezifität(?).
Ich hab jetzt etwas rumprobiert und glaube die Lösung gefunden zu haben, würde mir das aber gern nochmal bestätigen lassen.
So, wie der Code oben abgebildet ist, werden alle Elemente korrekt angesprochen.
Wenn ich bei den Klassenangaben (.side) das "div"-Tag jeweils komplett benenne (div.side...) funktioniert der letzte Punkt (a:hover, a.active) nicht mehr korrekt.
Ich hatte überlegt und war der Meinung, dass das gehen müsste, da ALLE <a>-Tags im Zustand hover/active angesprochen werden und somit auch die, die sich im <div class="side"> befinden. Schließlich steht der Eintrag für hover/active ja auch unter/nach den normalen <a>.
Das funktionierte aber nicht...
Ist die Lösung/die Begründung wie nachfolgend beschrieben korrekt?
Dadurch, dass ich das div komplett benenne, ist die Spezifität höher als der nachfolgende/darunter stehende Eintrag, der ebenfalls das <a>-Tag anspricht aber auf den vorhergehenden <div>-Eintrag verzichtet. Dadurch werden die Angaben, die nachfolgen und keinen <div>-Eintrag haben, ignoriert.
Im Netz habe ich folgenden Hinweis zum Thema Spezifität gefunden:
Eine CSS-Regel wird nur dann von einer weiter unten notierten Regel überschrieben, wenn beide Selektoren identisch sind und das gleiche „Gewicht“ haben.
Das nicht-Funktionieren würde dann (in meinen Augen) die logische Konsequenz sein.
Wenn ich ALLE Einträge mit dem <div>-Tag versehe, sind die Einträge wieder gleich gestellt und der nachfolgende/untenstehende hover/action-Eintrag funktioniert ebenfalls. Das entspricht also auch der Begründung.
Danke vorab fürs Feedback!
Ich hab jetzt etwas rumprobiert und glaube die Lösung gefunden zu haben, würde mir das aber gern nochmal bestätigen lassen.
HTML:
<body>
<div class="side">
<header>HEADER-INHALT</header>
<a class="active"><span>Punkt 1</span></a>
<a href="#"><span>Punkt 2</span></a>
<a href="#"><span>Punkt 3</span></a>
</div>
</body>
CSS:
body {}
.side {}
.side header {}
.side a {}
a:hover, a.active {}So, wie der Code oben abgebildet ist, werden alle Elemente korrekt angesprochen.
Wenn ich bei den Klassenangaben (.side) das "div"-Tag jeweils komplett benenne (div.side...) funktioniert der letzte Punkt (a:hover, a.active) nicht mehr korrekt.
Ich hatte überlegt und war der Meinung, dass das gehen müsste, da ALLE <a>-Tags im Zustand hover/active angesprochen werden und somit auch die, die sich im <div class="side"> befinden. Schließlich steht der Eintrag für hover/active ja auch unter/nach den normalen <a>.
Das funktionierte aber nicht...
Ist die Lösung/die Begründung wie nachfolgend beschrieben korrekt?
Dadurch, dass ich das div komplett benenne, ist die Spezifität höher als der nachfolgende/darunter stehende Eintrag, der ebenfalls das <a>-Tag anspricht aber auf den vorhergehenden <div>-Eintrag verzichtet. Dadurch werden die Angaben, die nachfolgen und keinen <div>-Eintrag haben, ignoriert.
Im Netz habe ich folgenden Hinweis zum Thema Spezifität gefunden:
Eine CSS-Regel wird nur dann von einer weiter unten notierten Regel überschrieben, wenn beide Selektoren identisch sind und das gleiche „Gewicht“ haben.
Das nicht-Funktionieren würde dann (in meinen Augen) die logische Konsequenz sein.
Wenn ich ALLE Einträge mit dem <div>-Tag versehe, sind die Einträge wieder gleich gestellt und der nachfolgende/untenstehende hover/action-Eintrag funktioniert ebenfalls. Das entspricht also auch der Begründung.
Danke vorab fürs Feedback!
