Ishita Ishita - 4 months ago 11
CSS Question

Is this CSS selector incorrect .my-class *:not(input[type="text"])

I want to select all elements except input of type text inside the DOM element with class "my-class".

So, I have CSS selector like this

.my-class *:not(input[type="text"]) {
// Some CSS poperties here
}


Is this incorrect ? It doesn't seem to work!

Answer

:not() is a CSS negation pseudo-class selector. It is a functional pseudo-class selector that takes a simple selector as an argument, and then matches one or more elements that are not represented by the argument.

More info here and here.


You can only use simple selectors with the :not negation pseudo-class selector.

Use the following to achieve what you want:

.my-class :not([type='text']) {
   //CSS properties here
}

Since there is no other HTML element that uses the attribute [type="text"] you can lose the input selector and then you'll be all set with the attribute simple selector. Also you do not need to use the * as a selector, it already matches every element.


jsFiddle


CODE SNIPPET:

.my-class :not([type='text'])::after {
  content: "selected";
  border: 1px solid red;
}
<div class="my-class">
  <input type="text">
  <input type="checkbox">
  <input type="radio">
  <div class="element">Div</div>
  <section>Section</section>
  <h1>H1</h1>
</div>


You may ask why it only accepts simple selectors, it's a matter of performance.

Fast vs Complete Selector Profiles

It is possible that in level four selectors they lift this restriction. It's under consideration.

Comments