Sass Ampersand nesting with pseudo selectors

Question

Trying to utlize the SASS Ampersand to get the following css output. It is not working when we use Ampersand with inside pesudo selector.

CSS

.test:first-child .test-image { display: block; }

SASS

.test {
    &:first-child {
        display: inline-block;
        &-image {
            display: block;
        }   
    }
}

Above code basically cascading the -image with first-child.

Answer 1

This is because the ampersand is just concatenating the parent with the child. If you want the compiled CSS to look like your example you need to do this:

.test {
    &:first-child &-image{
      display: block;     
    }
}

Answer 2

If you are trying to achieve

.test:first-child .test-image { display: block; }

With your code it is getting compiled as this

.test:first-child-image {
    display: block;
}

Instead ,you can simply write it as this .

.test:first-child {
        .test-image {
            display: block;
        }   
}

Hope it helps

Answer 3

It sounds like you have mistaken how the ampersand works in Sass. The ampersand is essentially a shorthand for writing each outer selector and then adding the selector after it onto the end. As .test-image is distinct from .test , you should specify it as follows.

.test {
    &:first-child {
        .test-image {
            display: block;
        }   
    }
}

Compiles to

.test:first-child .test-image {
    display: block;
}