Conditionals in less

                    <div id="mceu_53-body">
                        <div
                            id="mceu_46"
                            class="mce-widget mce-btn mce-active"
                            tabindex="-1"
                            aria-pressed="true"
                            role="button"
                            aria-label="Minature image"
                        >
                            Minature
                        </div>
                        <div
                            id="mceu_47"
                            class="mce-widget mce-btn"
                            tabindex="-1"
                            aria-pressed="false"
                            role="button"
                            aria-label="Align left"
                        >
                            Align left
                        </div>
                        <div
                            id="mceu_48"
                            class="mce-widget mce-btn"
                            tabindex="-1"
                            aria-pressed="false"
                            role="button"
                            aria-label="Align right"
                        >
                            Align right
                        </div>
                    </div>

I want to add a condition in Less which can set display: none; for aria-label="Align left" and aria-label="Align right" when aria-pressed="true" for aria-label="Minature image".

Generally what I want to achieve is, when user click on miniature div, I want to hide left and right align div.

I’m able to do some changes by declaring *[aria-pressed='true'][aria-label='Minature image'] in miniature div. How can I access sibling and set the CSS?

Thanks a lot.

I don’t do Less but assuming the html is as shown then you can hide the divs using the general sibling selector.

e.g.

[aria-pressed="true"][aria-label="Minature image"] ~ [aria-label="Align left"],
[aria-pressed="true"][aria-label="Minature image"]
  ~ [aria-label="Align right"] {
  display: none;
}

I’m not sure if that’s what you meant though.

1 Like

Yes. I’m sorry for the late answer.
Thank you a lot for your help.