Can you chain Anchor Pseudo-classes in CSS or SCSS?

Question

I am using SCSS and was wondering if there was a better way to write this...

.nav li a:hover, .nav li a:active, .nav li a:visited, .nav li a:focus

I would love if something like this was possible...

.nav li a:hover:active:visited:focus

Answer 1

SCSS offers some assitance

You cannot chain pseudo-classes in CSS, but in SCSS you can reference the parent selector with the & in nested syntax:

.nav li a {
    &:hover,
    &:active,
    &:visited,
    &:focus {
        …
    }
}