CODEWITHSUNDEEP
csssasscss-selectorspseudo-class
Nachshon Schwartz
Nachshon Schwartz

Reputation: 15775

Adding class selector after pseudo selector in css

Can I add a class selector after a pseudo class in my CSS rule, e.g:

a:hover.my-class {
    background: red;
}

So if I hover over my anchor tag, <a class="my-class">link</a>, will the background be red in all browsers? is this valid CSS?

Why I need this

I have this problem because it is generated from a mixin in SASS:

@mixin focus($classA, $classB) {
  &:focus {
    &#{$classA} {
      background: blue;
    }

    &#{$classB} {
      background: yellow;
    }
  }
}

a {
  @include focus('.class-a', '.class-b')
}

Upvotes: 4

Views: 2407

Answers (2)

Sevban &#214;zt&#252;rk
Sevban &#214;zt&#252;rk

Reputation: 1986

Yep, you can add a class to a pseudo class.

This css is valid and it works:

a:hover.hoverme {
  background:blue;
  color:white;
}

This works too:

a.hoverme:hover {
  background:blue;
  color:white;
}

Or you can add a pseudo class after a class.

.hoverme:hover {
  background:blue;
  color:white;
}
<a href="#" class="hoverme">Hover me!</a>

You can check if your CSS is valid at W3C's CSS Validator page.

Upvotes: 1

BoltClock
BoltClock

Reputation: 724132

There is no such thing as a "pseudo-selector".

There are two features in selectors that start with "pseudo-": pseudo-class and pseudo-element. They are completely different features with different syntax rules.

You can place a class selector after a pseudo-class such as :hover, because they are both simple selectors and order of simple selectors in a compound selector does not matter (type and universal selectors are the only exceptions to this rule — they always have to come first, such as the a in your example).

You cannot place a class selector after a pseudo-element such as ::before, because a pseudo-element is not a simple selector. Your question may not be about pseudo-elements, but this distinction has to be made because of the common use of the term "pseudo-selector", which incorrectly groups both features into a single umbrella term (and frankly makes the question more complicated than it really needs to be).

Upvotes: 3

Related Questions