如何使用scss从子级中选择父级伪类 [英] How to select parent pseudo-class from within child using scss

问题描述

我想使用以下模式选择父级.

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 [输出]:

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

推荐答案

所以看来这真的很容易.哎呀.

So seems like this is really easy. Whoops.

您只需执行以下操作:

SCSS:

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

这可能看起来很愚蠢，但对我来说，它实际上很有用.

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

这篇关于如何使用scss从子级中选择父级伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！