How do I combine pseudo-elements with pseudo-classes?

Question

How do I combine pseudo-elements like :after with pseudo-classes like :hover and :not?

li {
  margin-bottom: 10px;
}
li:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #009688;
  transition: width .8s;
}
li:hover:after {
  width: 100%;
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>forth</li>
  <li>fifth</li>
</ul>

How can I exclude, for example, the first and third items in the list from this hover effect?

Answer 1

There are no special rules around combining pseudo-classes and pseudo-elements, besides the one rule that says there can only be one pseudo-element per complex selector and it must appear at the very end. Pseudo-classes can be written in any order — the order of simple selectors doesn't change the meaning of a compound selector. Note that a pseudo-element, unlike a pseudo-class, is not a simple selector.

You can write any of

li:not(:nth-child(1)):not(:nth-child(3)):hover:after

or

li:hover:not(:nth-child(1)):not(:nth-child(3)):after

or

li:hover:not(:nth-child(3)):not(:nth-child(1)):after

or, heck, even

li:not(:nth-child(3)):hover:not(:nth-child(1)):after

and you would get the same result (assuming the browser isn't buggy), as long as :after, the pseudo-element, appears last (and li, the type selector, appears first).

By convention, most authors choose to place structural pseudo-classes, such as :nth-child(), before dynamic pseudo-classes, such as :hover. But this is entirely personal preference; it doesn't matter to the browser.