CSS and a properties

[hadiz]

Hiya,

I'm trying to find a more streamlined approach to redefining a tags. Take the following example:

<div class="qlinks">
<a class="qlinks" href="#">
<a class="qlinks" href="#">
<a class="qlinks" href="#">
</div>

This is how I currently have it setup. Here is the associated styling:

.qlinks {
text-align:center;
}
a.qlinks, a.qlinks:visited, a.qlinks:active, a.qlinks:link {
font: bold 12px/1.5em Verdana;
color: #000;
text-decoration:underline;
}
a.qlinks:hover {
font: bold 12px/1.5em Verdana;
color: #959595;
text-decoration:underline;
}

I thought there was a way to do something like this instead of what I have above in order to condense the styling down as much as possible, however it doesn't seem to be working:

.qlinks a, a:active, a:visited, a:active, a:link {
font: bold 12px/1.5em Verdana;
color: #000;
text-decoration:underline;
}
.qlinks a:hover {
font: bold 12px/1.5em Verdana;
color: #959595;
text-decoration:underline;
}

And then the resulting HTML would look something like this (notice the class="qlinks" is not present on each a property, but it should still inherit the styling:

<div class="qlinks">
<a href="#">
<a href="#">
<a href="#">
</div>

Any idea where I'm going wrong, or a better approach perhaps? Sometimes on my sites it is necessary to have 2 or more different font stylings. Not ideal I know, but that's how I'm told to do it.

[Munsiblicious]

You have to add the .qlinks selector before every "a" selector, so it would be:

.qlinks a, .qlinks a:visited, .qlinks a:active, .qlinks a:link { ...

I'm not sure why the CSS you have doesn't work; it should apply those styles to every a:visited, a:active, and a:link (not just those under the qlinks div). My guess would be that you have a rule for anchor tags with more specificity or higher on the cascade that supercedes this rule. (Rules with more selectors have a higher specificity, and take precedence over those that have fewer. Rules also "cascade" in the order of: those defined inline take precedence over those in the head, which take precedence over those loaded with a <link>)

[Xapti]

just specify .qlinks a{style info}
Only if the other modes (visited, active, etc.) should be styled differently should you mention them.
When you do mention them, you do not need to include previous information in the original style, just the changes. Also keep in mind that they must be specified in the proper order:
a:link, a:visited, a:hover, a:active
And as someone mentioned, you may need to also watch out for specifity issues. Styles which are the most specific (IDs, classes, nesting, etc.) get priority over simpler styles.