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

    How to reduce the gap between HTML5 video tag

    How to get the min-height of the object when its parent is set to display none?

    CSS / Jquery How to auto-size containers and images

    CSS breadcrumb - how to make radius small

    How to adjust Capybara finders on a site using css-modules?

    CSS 100vw causing scrollbar to show, cant use 100% unfortunately

    How can I do this menu using list and css?

    How to rotate an image on click and then rotate it back after another click? Using HTML, CSS and jQuery

    How to change opacity in disabled state of image in css

    How to reduce the number of sprites when using css sprite technique

    How to make JS & CSS inline work for eBay template?

    How to make a circle breadcrumb with only css

    How to replicate {cursor: hand; cursor: pointer} in jQuery

    How to stop divs moving in browser when zoom in/out?

    How to create a similar background to this one

    How to select a non unique element through CSS

    How to conditionally load CSS and extend it using SASS/SCSS

    How to change parent element css-properties by clicking on his child without javascript

    How can I keep the original :focus element with CSS?

    How to display message inline

    How do I get JavaScript to clear the previous onclick element when a user moves on to the next click?

    CSS isn't shown when HTML file is opened in Word

    How to style the values in a textfield using CSS?

    How to remove an element without id

    How to do proper and responsive Image Grid view with display:flex [duplicate]

    How to vertical-align text on this input box for IE

    How to maintain the background image until end of the page

    How can I make my an image?

    Ascii character codes shown as text in browser [duplicate]

    How to align radio buttons with labels in one line? [duplicate]