I'm trying to put together a selector in SASS that will operate on the visted, hovered state of a link, but I can't quite seem to get the markup right, can someone enlighten me? I was writing it like this:
&:visited:hover
attribute: foo
You can still chain pseudoselectors. For example, a:focus:hover works just fine to apply styles only if the element is focused AND hovered. See this link for a demonstration. It works fine (in Chrome, at least); click in the demo area, press tab to focus the link, then hover it to see it become bolded.
Before using the experimental pseudo elements, check their browser-support. To use multiple pseudo elements on one selector, you need to write them on that selector in different lines.
Pseudo Class Selectors When utilizing & in Sass, a single declaration block can be written for <a> . Then from within the block, <a> can be referenced with &:hover , &:active , and &:focus . These pseudo selectors are just the beginning though, :nth-child , :target , :checked , and many more await.
a
&:visited:hover
attribute: foo
Nowadays, this is the only valid form. Indention has to be consistent (2 spaces are recommended) and the colon follows the attribute.
a
&:visited:hover
:attribute foo
Try that - note that identation is two spaces, and the colon goes before attribute not after.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With