CODEWITHSUNDEEP
htmlcsscss-selectors
Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

Css :not() selector not supporting complex selectors inside it

With CSS3 both :not() selector as well as attribute contains selector are available, but while mixing the both there comes the problem, it is not working.

HTML:

<input type='text'/>
<input type='text' id="dasd_Date_asd"/>

CSS:

input[type='text']:not(input[id*='Date']) {
    display:none;
}

DEMO

Can anyone tell what is going on wrong here?

Note: There is no privilege given to us for changing the markup.

Upvotes: 8

Views: 2342

Answers (3)

Felix Geenen
Felix Geenen

Reputation: 2707

As of 2021 your code actually works and you can use complex selectors in :not() statements. It works for all major browsers (https://caniuse.com/css-not-sel-list)

https://jsfiddle.net/o6x10ytc/

Upvotes: 4

Alex Char
Alex Char

Reputation: 33218

You can't use two selectors in not:

input[type='text']:not([id*='Date']) {
  display: none;
}
<input type='text' />
<input type='text' id="dasd_Date_asd" />

Selectors level 3 does not allow anything more than a single simple selector within a :not() pseudo-class.

Upvotes: 11

A.B
A.B

Reputation: 20445

You should first select input type and then cutt off the input with type id that has value "Date". your were again providing input as a selector in :not()

try this.

     input[type='text']:not([id*=Date]) {
        display:none;
    }
<input type='text'/>
<input type='text' id="dasd_Date_asd"/>

Upvotes: 4

Related Questions