Search code examples
htmlcsscss-selectorspseudo-class

Multiple Pseudo Classes on a Single Selector


Is the following CSS syntax valid?

a:first-child:hover { background-color: transparent; }

If so, what is the compatibility as far as browsers? For example, is it compatible in IE8, IE6+, Firefox 4, Chrome, etc.


Solution

  • Combo first-child and :hover is correct(IE6 recognize only last pseudo-class in the chain):

    div span:first-child:hover {
      color: red;
    }
    <div>
      <span>asdasd</span>
      <span>asdasd</span>
      <span>asdasd</span>
    </div>