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 prevent css inherit?

    How to change the background color on a input checkbox with css? [duplicate]

    How to keep my hover unchanged after it's release

    How to make display:flex work for responsiveness - Bootstrap?

    How to perform --include-css when using the Jekyll stylus plugin

    Show/Hide Div in jQuery, issue with “skipping” divs

    How to get a smooth sine wave alternation with Javascript/JQuery CSS

    How to refine CSS media types and properties?

    sunken border when background-color css specified - how to avoid?

    How To Fix This “Select” Drop Down Using Css [duplicate]

    How do you force a website to be in landscape mode when viewed on a mobile device?

    How to loop through divs with no knowledge of what the user viewed and what they WANT to view

    HTML/CSS: how to position forms? [closed]

    How to remove the default active tab color when another tab is active using jquery

    How to get bean property on css file?

    How to animate searchbox length from focusing on the textbox class CSS3?

    How to set 3 div's to fit the screen width

    Why won't my SVG's show?

    How to add css class in aspx.cs page means code behind page

    How to Trigger css animation both on scrolling down and up

    How do I switch external CSS files?

    How to add multiple attributes in CSS in input element [duplicate]

    how to affect an element's width by one child element but not others using CSS

    How to set CSS rule for a LI in a UL nested in DIV with class?

    How to change button colors upon click (Javascript)?

    How to make children auto fit parent's width only with CSS?

    How to make one list-item in menu higher than the others with CSS?

    How To Prevent CSS Background Image From Moving When Shown?

    how to get true css property names from CSSStyleDeclaration object?

    How can i fill a paragraph (until end of line) with dashes using CSS