LGSon LGSon -4 years ago 52
CSS Question

Global selector combined with :not(.class) doesn't seem to work

I would like to select all

input
that is not a child of a parent having the class
no-material


I used this selector,
main *:not(.no-material) input
, which, to me, should work and select the last 4
input
s, but it doesn't.

Is this not possible, or what am I missing here?

Stack snippet



main *:not(.no-material) input {
border: 1px solid red;
}

<main>

<div class="no-material">
<input name="no-1">
</div>

<div>
<label class="no-material">
<input name="no-2">
</label>
</div>

<div>
<label class="no-material">
<span>
<input name="no-3">
</span>
</label>
</div>

<div>
<label>
<span class="no-material">
<input name="no-4">
</span>
</label>
</div>

<div>
<input name="no-1">
</div>

<div>
<label>
<input name="no-2">
</label>
</div>

<div>
<label>
<span>
<input name="no-3">
</span>
</label>
</div>

<div>
<label>
<span>
<input name="no-4">
</span>
</label>
</div>

</main>








As a side note, when done like this it works just fine and select the first 4
input
's

main *.no-material input {
border: 1px solid blue;
}


Stack snippet



main *.no-material input {
border: 1px solid blue;
}

<main>

<div class="no-material">
<input name="no-1">
</div>

<div>
<label class="no-material">
<input name="no-2">
</label>
</div>

<div>
<label class="no-material">
<span>
<input name="no-3">
</span>
</label>
</div>

<div>
<label>
<span class="no-material">
<input name="no-4">
</span>
</label>
</div>

<div>
<input name="no-1">
</div>

<div>
<label>
<input name="no-2">
</label>
</div>

<div>
<label>
<span>
<input name="no-3">
</span>
</label>
</div>

<div>
<label>
<span>
<input name="no-4">
</span>
</label>
</div>

</main>




Answer Source

The problem here is that your code satisfies too many scenarios.

For example, the following will satisfy your rule.

<div>
  <label class="no-material">
    <span>
      <input name="no-3">
    </span>
  </label>
</div>

This is because the span is an element without that class that precedes an input.

What you could do is apply the rule you want to all inputs and then override the ones that have that class to be back to the original style.

For example:

main input {
  border: 1px solid blue;
}
main .no-material input {
  border: 1px solid black;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download