nicht angemeldet
Klasse in Klasse ansprechen
3 
suit
0
Klasse in Klasse ansprechen
Hallo SELFHTML-Forum!
Ich scheitere gerade an einem Anfängerproblem: Ich will eine Klasse innerhalb einer Klasse ansprechen.
Ich habe mein eigentliches Problem wie folgt vereinfacht:
<style>
.footer a:hover {background:yellow}
.footer .rot a:hover {background:red}
</style>
<div class="footer">
<a href="#">Lorem <span class="rot">ipsum</span></a>
</div>
Müsste nicht "ipsum" einen roten Hintergrund erhalten, sobald der hover-Effekt ausgelöst wird? Wie spreche ich die Klasse "rot" an?
Beste Grüße
Isma
-
Müsste nicht "ipsum" einen roten Hintergrund erhalten, sobald der hover-Effekt ausgelöst wird? Wie spreche ich die Klasse "rot" an?
Da span-Element mit der Klasse "rot" ist ein Kind des a-Elements
Dein Seketor würde aber ein a-Element (welches gerade "überfahren" wird) ansprechen, welches seinerseits in einem Element steckt, welches zur Klasse "rot" gehört. Du hast in der Reihenfolge etwas verdreht.
btw: rot ist ein unkluger Klassenname - benenne Elemente/Klassen nach ihrer Funktion, nicht nach ihrem derzeitigen Erscheinungsbild.
z.B. "companyname" oder "warning" - kommt auf den Kontext an.
-
btw: rot ist ein unkluger Klassenname - benenne Elemente/Klassen nach ihrer Funktion, nicht nach ihrem derzeitigen Erscheinungsbild.
In Ordnung. Tatsächlich hatte ich die Klasse (intuitiv) .rss-icon genannt.
-
-
Hi,
.footer .rot a:hover {background:red}
<div class="footer">
<a href="#">Lorem <span class="rot">ipsum</span></a>
</div>Müsste nicht "ipsum" einen roten Hintergrund erhalten, sobald der hover-Effekt ausgelöst wird?
Befindet sich der Link etwa innerhalb eines SPAN-Elements mit der Klasse "rot", so wie du es im Selektor gefordert hast?
Wie spreche ich die Klasse "rot" an?
Mit dem Klassenselektor.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Befindet sich der Link etwa innerhalb eines SPAN-Elements mit der Klasse "rot", so wie du es im Selektor gefordert hast?
Nein, das Span mit der Klasse "rot" befindet sich innerhalb eines Links. Ich hatte also die Reigenfolge vertauscht. Danke für den Hinweis! So kann ich die Klasse "rot" ansprechen:
<style>
.footer a:hover {background:yellow}
.footer a:hover .rot {background:red}
</style><div class="footer">
<a href="#">Lorem <span class="rot">ipsum</span></a>
</div>
-