• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] CSS-Kaskade / Spezifität

annsen

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

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!
 
Werbung:
Hy Leute! Ich bin zwar hier falsch aber kann mir jemand helfen? Ich habe eine Code mit JavaScript gemacht um eine Seite Passwort zu schützen. Ich müsste aber wissen wie man nach der bestätigung automatisch auf die Seite weitergeleitet wird währe dankbar wenn ihr mir helfen würdet.
 
Werbung:
Werbung:
Zurück
Oben