How to select parent pseudo-class from within child using scss

Question

I'd like to select the parent using the following pattern.

I understand I could write this within the parent selector, but I'd like to know if it's possible to prefix the parent's pseudo class to the child from within the child selector.

JSX:

<div class="parent">
    <div class="child" />
</div>
<div class="parent">
    <div class="child" />
</div>

SCSS:

.parent {
    height: 100px;

    .child {
    // the goal is to write this so it produces the CSS output below, from 
    // within .child

        &:first-child & {
            height: 50px;
        }
    }
}

CSS [output]:

.parent:first-child .child {
    height: 50px;
}

Answer 1

So seems like this is really easy. Whoops.

You just do the following:

SCSS:

.child {
    .parent:first-child & {
        height: 50px;
    }
}

This probably looks silly, but for my situation, it's actually useful.