How to use the not selector correctly in CSS [duplicate]


Tags: css,css-selectors

Problem :

This question already has an answer here:

I understand the basic gist of using :not() in CSS, but it doesn't seem to work for me. I am trying to do something like:

input[type=text][readonly]:not(.class1, .class2) {
background-color: #DDDDDD;
color: #1E1E1E;
}

But this does nto seem to work for me. whenever I read any information on this, it will have examples like input:not(.class1, .class2) {, but nothing between the tag and the :not() part. Am I correct in assuming that the syntax I have written is incorrect? Can I not define the tag element any more if I use :not()?



Solution :

Your only issue is that you're passing two selectors inside the :not() use only one per statement.

Currently extended arguments (foo, bar) are not supported by any browser.

Use

:not(.class1):not(.class2)

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot

input[type=text][readonly]:not(.class1):not(.class2) {
  background-color: #DDDDDD;
  color: #1E1E1E;
}
<input type=text readonly class="class1">
<input type=text readonly>
<input type=text readonly class="class2">


    CSS Howto..

    CSS: How to make this kind layout?

    How can i add a preload function for my images?

    How to make Angular Forms ngModel classes inherit from Bootstrap Forms classes

    jQuery - How to revert css changes when using slideToggle()?

    Where Can I Learn How To Fit A Website To Fit Many Android Resolutions?

    How can I make a border wrap around a group of pictures?

    how to change properties of a parent div on hover of child div

    How to repeat a code in html without writing the same code again and again

    How does Bootstrap's Jumbotron example create space in navbar elements

    Why are div's not staying in row and how to get them to?

    How to code CSS for all browsers in jQuery.css() method?

    Html and CSS for emails, how to, where to?

    Understanding how Flexbox works with Bootstrap

    How to write css for each page in rails 3

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

    How to fade out text on top of semi-transparent div using CSS?

    Always have my Image show in X percentage using CSS?

    CSS/Bootstrap: How to stretch containers within cols full-height?

    how to make a box of nxn given in a url?

    How to make input[type=text] to fill remaining horizontal space?

    how to build a triangular slider? [closed]

    how to fix the button so that they don't scroll with contents

    how to make the textarea's width fixed but keep the height flexible CSS

    How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?

    How to make both text and image change on rollover via CSS?

    How to make input+label in a form appear one by one?

    How to incorporate specific CSS files for Responsive Design for Desktop and Mobile Browsers

    How do I add hover cursor and still get move cursor on JQuery Table Sortable?

    how to display php search engine execution time and number of results before the results

    How slow is * css selector for mobile browsers?