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

Question

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!

jsfiddle.net/gpzfcn7c - your selector seems to be working just fine. — Robert
@BoltClock - Yeah, I had assumed OP was aware of the browser-restrictions for not() before trying to implement it. — Robert

Ricky Ricky · Accepted Answer · 2016-08-05T18:25:07

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

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

2 Answers