CSS selector to target element where sibling does not have a specific class

user_2720874 0
Viewed 137

I'm working on a slider that has previous button, content and next button as sibling nodes. I'm hiding disabled buttons and I need to adjust the margin for the content I'm having difficulties with the selectors. I want to target the container to adjust the margin based on if the button is disabled or not. My initial idea was to do this with flex but it's an old

I've been trying something like

.content {
    &:not(+ .button-disabled) {
        margin-left: 50px;
    }
}

but it seems I'm not allowed to have a +inside :not(). Is there any other way I can target this?

sass css
1 Answers

You can define a class to the parent container of the three siblings, like

<div class="disabled-button">
    <div class="prev"></div>
    <div class="cont"></div>
    <div class="next"></div>
</div>

And define CSS for them, like:

.wrapper {
    width: 80%;
    height: 30px;
    display: inline-flex;
}

.wrapper > div {
    width: 33%;
    height: 100%;
    border: 1px solid black;
    background-color: green;
}

.wrapper.disabled-button .prev {
    margin-left: 50px;
}
<div class="disabled-button wrapper">
    <div class="prev"></div>
    <div class="cont"></div>
    <div class="next"></div>
</div>

<div class="wrapper">
    <div class="prev"></div>
    <div class="cont"></div>
    <div class="next"></div>
</div>

user_4365600
Related