Check if specific parent selector exists

Question

I have the following html with 2 panels inside one another. I want to apply CSS ONLY to the outer ky-panel and ky-panel body. How can I do this? The reason I want to do this is because the panels have mainly common CSS, but I would like to change a few things when the panels are nested.

<div class="ky-panel">
    <div class="ky-panel-body">
        <div class="ky-panel">
            <div class="ky-panel-body">
                some HTML with some CSS
            </div>
        </div>
    </div>
</div>

I've tried the following CSS but it does not work:

@mixin ky-panel-body {
    @if & {
        some CSS
    }
}

Normally that type of logic would go in your template (or template generator), and you'd add a class to the outer element. — isherwood, Feb 05 '18 at 15:02
In this specific case you could use `:not`, if you combine it with the child selector: `:not(.ky-panel-body) > .ky-panel`, `:not(.ky-panel-body) > .ky-panel > .ky-panel-body` — CBroe, Feb 05 '18 at 15:08
"the following CSS" is not CSS. Please add the CSS to your post. — TylerH, Feb 05 '18 at 15:28
Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — TylerH, Feb 05 '18 at 15:29
Remember, Sass can only do what CSS can do, only less verbosely. — TylerH, Feb 05 '18 at 15:29

score 1 · Answer 1 · answered Feb 05 '18 at 15:02

For me, if you keep your structure like this, you have no other solution than to apply your CSS to ky-panel-body and ky-panel and revert it if they are nested :

.ky-panel{
    border: 1px solid black; //Just an example

    .ky-panel-body{
        color: red; //Just an example

        .ky-panel{
            border: inherit; //Revert your changes

            .ky-panel-body{
                color: inherit; //Revert your changes
            }
        }
    }
}

Check if specific parent selector exists

1 Answers1