0

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).

bluefox
  • 175
  • 3
  • 16
  • 1
    `.input` searches for the elements with the class `input` and not that has the tag name `input`. – t.niese Sep 07 '21 at 18:54
  • This looks like it would require traversing back up the tree, which is not possible with CSS... – Alexander Nied Sep 07 '21 at 18:56
  • I'm not sure if I fully understand your question. The title of the question says: `Hide parent elements that contain a child element with a certain attribute` but in the text you say `my goal is to hide all elements … below the only non-disabled button.` how does the title match the text, the text talks about siblings the title about parent. – t.niese Sep 07 '21 at 18:58
  • What do you mean with `below the only non-disabled button`, only the element with the `id` `10` or also `11`, `1`, `9`? – t.niese Sep 07 '21 at 19:10
  • 1
    That's not possible with css right now. In the draft there are selectors that would allow you to do that, but there is no support in the browsers right now ([Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector)) – t.niese Sep 07 '21 at 19:34
  • What if I would think of the following: "Select all elements of class "MyRow" that contain a child input that does not have "disabled" attribute". Would that work or did I just paraphrase the same issue again ? – bluefox Sep 07 '21 at 19:40
  • 2
    You just rephrased the problem. What you said would be the `:has` selector mention in my link. `:has` or parent selector is basically the same just with a different semantic/syntax. – t.niese Sep 07 '21 at 19:42
  • 1
    As an additional note: If you ask questions, make sure that everything you post is valid and reflects what you have (use copy and past of your current state and verify that it really reflects your current state). Your HTML contains various errors, that would prevent the css selector to work even with the change to `input:not([disabled]) ~ input {`. If you have such errors in the question the ones who try to answer it will first assume that the problem is due to those errors. And that wastes valuable time that could be used to answer other questions. – t.niese Sep 07 '21 at 19:47

1 Answers1

0

The problem is that you are selecting a class of input and not the input itself. Simply remove the . from your selector to get

.MyMainSection {
    .MyRow {
        input:not([disabled]) ~ input {
            display:none;
        }
    }
}
Michael
  • 101
  • 4
  • Have you verified that it works, and that this is the only problem? – t.niese Sep 07 '21 at 19:04
  • I agree with your other comment that OP's question is unclear. The answer I submitted will actually hide the element that immediately follows an element with no "disabled" attribute. So I'm not too sure if this is what OP wants. Hopefully he figured it out once he saw us say he is selecting a class of `input` rather than the actual input elements. – Michael Sep 07 '21 at 19:11
  • Let's assume your CSS is what the OP is looking for. But are you sure it will work with what the OP provided? Did you try it with what is provided in the question? – t.niese Sep 07 '21 at 19:14
  • Your are right, I (OP) was not precise and correct. 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 select 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. Your code snippet only hides input elements. – bluefox Sep 07 '21 at 19:24