Search code examples
csswildcardpseudo-class

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

Solution

  • 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.