I'll be honest, I'm struggling to get my head round this. I came to advanced CSS comparatively late and whilst my practises have improved a lot I find myself frustrated in my logic.

For example, today I'm trying to apply a style to the various standard and hover classes of links inside H tags (H1-H6). What I want to do is this:

h1 h2 h3 h4 h5 a a:active a:hover a:visited a:link {
    color: #FFF;
    text-decoration: none;
    font-variant: small-caps;
h1 h2 h3 h4 h5 a:hover {
    text-decoration: underline;
    background-color: #921;

but of course it won't work. Splitting the H selectors and a selectors won't accomplish it either of course. I don't want to have multiple entries duplicating the style for each H tag but is this the only feasible way to accomplish it?

1 answer

Ktash 1851
This was chosen as the best answer

So, what this code is actually saying is: For all a link tags under a tags that have been visited under a tags that are hover that are under a tags that are active that are under a tags that are under h5 tags.... and so on.

My guess is you want it to be for a:* under any h1 through h5 tag, do this. This would be accomplished with the following, long code:

h1 a, h1 a:active, h1 a:hover, h1 a:visited, h1 a:link,
h2 a, h2 a:active, h2 a:hover, h2 a:visited, h2 a:link,
/* ... and so on and so forth */

However, the same thing can be accomplished with the following set of codes:

h1 a, h1 a:active, h1 a:visited,
h2 a, h2 a:active, h2 a:visited,
/* ... */

This is because browser specific styles will change styles on active or on visited, but the others should be consistent. Now, this breaks down if you are overriding other styles you've setup. Unfortunately I don't know of an easier way to do this in CSS. I'd recommend taking a look at W3 Schools CSS Reference and brushing up a bit on how selectors are done, and what works in what browsers. If you're feeling brave, you can also add in some CSS3 Selectors to do some fancy things for browsers that support it, but I'd worry about getting things the way you want them across the board first.

Answered almost 8 years ago by Ktash
  • That's exactly what I was trying to accomplish! I've always been pretty long-hand about CSS (to the detriment of SEO and plain pageload efficiency), it's quite liberating in a way to be able to combine rules but I find it frustrating that some things you think should be easily accomplishable aren't available. (trust me, css-tricks and W3schools are red hot bookmarks on my Delicious ;-) Whilst I couldn't think of a simpler way of displaying it, I was aware the way I'd written the code was actually being interpreted as you demonstrated - I got some funky results inserting commas too. :D Your second example is the most elementary method, I'll be rewriting in that format. Thanks very much! almost 8 years ago