Question

Could I get a little help with this CSS? In my stylesheet I have my anchor colors defined:

a:link {}
a:visited {}
a:hover {}

Later on in the stylesheet, I have some anchors that are within a span defined as:

span.logout {}
span.logout a:link, a:visited {}
span.logout a:hover {}

The only thing is, my anchor colors in the logout span are overriding my primary anchor colors. I am confused as to why this is happening. I thought only the anchors within the “logout” span would be affected by this CSS.

Anyway, if anybody could help out with this, I would appreciate it. Also, am I using the term CSS “subclass” correctly?

Thanks for taking the time to read, and have a great day. 🙂

Answer 1

Your a:visited selector is standing on its own, without being qualified by the span.logout selector, because the comma separates it. In other words, it’s the same as if you had two rules like this, with the same set of declarations:

span.logout a:link {}
a:visited {}

This has the effect of overriding your previous a:visited rule even for visited links within span.logout.

You need to repeat the span.logout selector after the comma for it to take effect only within such span elements:

span.logout a:link, span.logout a:visited {}

CSS does not have a notion of “subclasses” in that all classes are treated the same, but your use here seems fine. I suppose the term “subclass” would have a clearer definition in something like OOCSS, though, which is but a CSS coding technique.

I would call your selector a contextual selector, in that you’re applying styles only to visited links in the context of span.logout elements (technically, the space separating span.logout and a:visited is called a descendant combinator).