CSS Applying wildcard to pseudo classes

Hopefully this isn't a stupid question but I can't seem to work out how to do this. Can you apply a wildcard to an anchor hover/focus so that the style is applied to all classes?

Something like

a:hover * { color: #ff0000; }

Say I have

a { color: #DD0000; }
a.link { color: #ffffff; }
a.link2 { color: #000000; }
a.user { ...
a.anything { ...

The easiest way to explain what I'm looking for is to have a global :hover style, but multiple :link styles. Thanks

Answers


There are a number of ways you can do this. As mentioned by others, you can apply the same style to multiple classes like so:

div a.class1:hover, div a.class2:hover, div a.class3:hover { ... }

You can also create a custom class just for the style you want to apply:

div a.customClass:hover { ... }

You could use * like you mentioned in the question, but apply hover to it:

div *:hover { ... }

There's also this option, where you just apply the style for all a's, although you probably know about this option already:

a:hover { ... }

Edit: If your style is being "overwritten" by something else, a quick and easy way to check would be to use your browser's developer tools to inspect the element. You can even apply pseudo-classes (ie. apply :hover pseudo-class even when you're not hovering over the element) with the developer tools included with Chrome and Firefox (you may need to download Firebug to do this with Firefox).

Another option would be to use !important to increase the selector's specificity. For example:

a:hover { background: red !important; }

You can read more about how the specificity is calculated here.


If you want to apply a global css rule for a specific tag, write (for anchors):

a:link{/*your styles go here*/}
a:hover{/*your styles go here*/}
a:active{/*your styles go here*/}
a:visited{/*your styles go here*/}

If you would like a special link styled in a different way (maybe making it a button), just apply a class to it and style the class:

a.customlink{/*your styles go here*/}

EDIT: if you want only some properties of the link to change on hover, which are going to be the same for two different links (let's say one ha yellow, while the other red colored background, and you wanted them both to have a black background), add another same class to the two links, and stylize it.

JsFiddle Example


You could separate them by commas like a:hover link, a:hover link2, a:hover etc { color: #ff0000; }

Does a:hover { color: #ff0000; } not do what you want it to?


Need Your Help

Alternative to standard MySQL using PHP

php mysql pdo mysqli mariadb

Yes, I'm yet another person to as this annoying question... but I'm not convinced thus far, so here goes!