LESS/CSS: Hide all subsequent elements below an element that does not contain a certain attribute

I have the following structure: <div id="1" class="MyMainSection"> <div id=2" class "MyRow"> <input id="5" type="button" … Read more LESS/CSS: Hide all subsequent elements below an element that does not contain a certain attribute

I have the following structure:

<div id="1" class="MyMainSection">
    <div id=2" class "MyRow">
        <input id="5" type="button" disabled>
        <input id="4" type="button" disabled>
        <input id="7" type="button" disabled>
    </div>
    <div class "MyRow">
        <input id="12" type="button" disabled>
        <input id="8" type="button">
        <input id="10" type="button" disabled>
    </div>
    <div class "MyRow">
        <input id="11" type="button" disabled>
        <input id="1" type="button" disabled>
        <input id="9" type="button" disabled>
    </div>
</div>

My goal is to hide all elements (via "display:none") below the only non-disabled button. The LESS selector should not purely look for "id=8" as the id is generated dynamically.

I had something in mind like

.MyMainSection {
    .MyRow {
        input:not([disabled]) ~ input {
            display:none;
        }
    }
}

but this doesn’t work…

Can someone help me ?

UPDATE:
I was not precise enough.
My selection statement already contained the input element and not the class "input", so this should not stop us.
But my issue is that I want to hide ALL subsequent elements in my HTML code (no matter if they are input, MyRow, MyMainSection or anything else that comes below that one non-disabled button).

Source: CSS – Stack Overflow


Categories: NewsTags: ,

Tags: ,


Leave a Reply

Your email address will not be published. Required fields are marked *