Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to chain pseudo selectors in SASS

Tags:

css

sass

haml

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
like image 271
Sam Murray-Sutton Avatar asked Sep 23 '08 10:09

Sam Murray-Sutton


People also ask

Can you chain pseudo selectors?

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.

Can you use multiple pseudo class selectors with an element?

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.

How do I add a pseudo class in Sass?

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.


2 Answers

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.

like image 51
crispy Avatar answered Oct 10 '22 09:10

crispy


a
 &:visited:hover
    :attribute foo

Try that - note that identation is two spaces, and the colon goes before attribute not after.

like image 40
user6325 Avatar answered Oct 10 '22 09:10

user6325