Can I write a CSS selector selecting elements NOT having a certain class or attribute

Question

I would like to write a CSS selector rule that selects all elements that don t have a certain class  For example  given the following HTML    lt html class  printable  gt       lt body class  printable  gt           lt h1 class  printable  gt Example lt  h1 gt           lt nav gt               lt  -- Some menu links    -- gt           lt  nav gt           lt a href  javascript void 0   onclick  javascript self print    gt Print me  lt  a gt           lt p class  printable  gt              This page is super interresting and you should print it           lt  p gt       lt  body gt   lt  html gt    I would like to write a selector that selects all elements that don t have the  printable  class which  in this case  are the nav and a elements   Is this possible   NOTE  in the actual HTML where I would like to use this  there are going to be a lot more elements that don t have the  printable  class than do  I realize it s the other way around in the above example

User · Answer

The  not negation pseudo class     The negation CSS pseudo-class   not X   is a functional notation   taking a simple selector X as an argument  It matches an element that   is not represented by the argument  X must not contain another   negation selector    You can use  not to exclude any subset of matched elements  ordered as you would normal CSS selectors     Simple example  excluding by class  div not  class   Would select all div elements without the class  class   x000D   x000D  div not  class    x000D    color  red  x000D    x000D   lt div gt Make me red  lt  div gt  x000D   lt div class  class  gt    but not me    lt  div gt  x000D   x000D   x000D      Complex example  excluding by type   hierarchy   not div   gt  div  Would select all div elements which arent children of another div   x000D   x000D  div   x000D    color  black x000D    x000D   not div   gt  div   x000D    color  red  x000D    x000D   lt div gt Make me red  lt  div gt  x000D   lt div gt  x000D     lt div gt    but not me    lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Complex example  chaining pseudo selectors  With the notable exception of not being able to chain nest  not selectors and pseudo elements  you can use in conjunction with other pseudo selectors    x000D   x000D  div   x000D    color  black x000D    x000D   not  nth-child 2    x000D    color  red  x000D    x000D   lt div gt  x000D     lt div gt Make me red  lt  div gt  x000D     lt div gt    but not me    lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Browser Support  etc    not is a CSS3 level selector  the main exception in terms of support is that it is IE9   The spec also makes an interesting point      the  not   pseudo allows useless selectors to be written  For   instance  not       which represents no element at all  or   foo not bar   which is equivalent to foo but with a higher   specificity

User · Answer

If you want a specific class menu to have a specific CSS if missing class logged-in   body not  logged-in   menu        display  none

User · Answer

Example     class   section-   not  section-name         include opacity 0 6          Write your css code here          Opacity 0 6 all  section-  but not  section-name

User · Answer

Just like to contribute that the above answers of  not   can be very effective in angular forms  rather than creating effects or adjusting the view DOM    input ng-invalid not  ng-pristine        your css here i e  border-color  red         Ensures that on loading your page  the input fields will only show the invalid  red borders or backgrounds  etc  if they have data added  i e  no longer pristine  but are invalid

User · Answer

not  class     Actually  this will select anything that does not have a css class  class  css-selector   applied to it   I made a jsfiddle demo   x000D   x000D      h2  color  fff  x000D       not  class    color red background-color blue  x000D       fake-class  color green  x000D       lt h2 class  fake-class  gt fake-class will be green lt  h2 gt  x000D       lt h2 class    gt empty class SHOULD be white lt  h2 gt  x000D       lt h2 gt no class should be red lt  h2 gt  x000D       lt h2 class  fake-clas2s  gt fake-class2 SHOULD be white lt  h2 gt  x000D       lt h2 class    gt empty class2 SHOULD be white lt  h2 gt  x000D       lt h2 gt no class2 SHOULD be red lt  h2 gt  x000D   x000D   x000D    Is this supported  Yes   Caniuse com  accessed 02 Jan 2020      Support  98 74  Partial support  0 1  Total 98 84    Funny edit  I was Googling for the opposite of  not  CSS negation    selector class      the oposite of  not

User · Answer

Typically you add a class selector to the  not   pseudo-class like so    not  printable           Styles        not  attribute            Styles        But if you need better browser support  IE8 and older don t support  not     you re probably better off creating style rules for elements that do have the  printable  class  If even that isn t feasible despite what you say about your actual markup  you may have to work your markup around that limitation   Keep in mind that  depending on the properties you re setting in this rule  some of them may either be inherited by descendants that are  printable  or otherwise affect them one way or another  For example  although display is not inherited  setting display  none on a  not  printable  will prevent it and all of its descendants from displaying  since it removes the element and its subtree from layout completely  You can often get around this by using visibility  hidden instead which will allow visible descendants to show  but the hidden elements will still affect layout as they originally did  In short  just be careful

User · Answer

You can use  not  class  selector as mentioned before   If you care about Internet explorer compatibility I recommend you to use http   selectivizr com    But remember to run it under apache otherwise you won t see the effect

User · Answer

As others said  you simply put  not  class   For CSS selectors  I recommend visiting this link  it s been very helpful throughout my journey  https   code tutsplus com tutorials the-30-css-selectors-you-must-memorize--net-16048  div not  success      color  red      The negation pseudo class is particularly helpful  Let s say I want to select all divs  except for the one which has an id of container  The snippet above will handle that task perfectly   Or  if I wanted to select every single element  not advised  except for paragraph tags  we could do     not p      color  green

User · Answer

I think this should work    not  printable    From  negative css selector  answer

User · Answer

Using the  not   pseudo class   For selecting everything but a certain element  or elements   We can use the  not   CSS pseudo class  The  not   pseudo class requires a CSS selector as its argument  The selector will apply the styles to all the elements except for the elements which are specified as an argument   Examples    x000D   x000D     This query selects All div elements except for      x000D  div not  foo    x000D    background-color  red  x000D    x000D   x000D   x000D     Selects all hovered nav elements inside section element except x000D     for the nav elements which have the ID foo   x000D  section nav hover not  foo    x000D    background-color  red  x000D    x000D   x000D   x000D     selects all li elements inside an ul which are not odd    x000D  ul li not  nth-child odd      x000D    color  red  x000D    x000D   lt div gt test lt  div gt  x000D   lt div class  foo  gt test lt  div gt  x000D   x000D   lt br gt  x000D   x000D   lt section gt  x000D     lt nav id  foo  gt test lt  nav gt  x000D     lt nav gt Hover me    lt  nav gt  x000D   lt  section gt  x000D   lt nav gt  lt  nav gt  x000D   x000D   lt br gt  x000D   x000D   lt ul gt  x000D     lt li gt 1 lt  li gt  x000D     lt li gt 2 lt  li gt  x000D     lt li gt 3 lt  li gt  x000D     lt li gt 4 lt  li gt  x000D     lt li gt 5 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    We can already see the power of this pseudo class  it allows us to conveniently fine tune our selectors by excluding certain elements  Furthermore  this pseudo class increases the specificity of the selector  For example    x000D   x000D     This selector has a higher specificity than the  foo below    x000D   foo not  bar    x000D    color  red  x000D    x000D   x000D     This selector is lower in the cascade but is overruled by the style above    x000D   foo   x000D    color  green  x000D    x000D   lt div id  foo  gt  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor x000D    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum   lt  div gt  x000D   x000D   x000D

[html] Can I write a CSS selector selecting elements NOT having a certain class or attribute?

The `:not` negation pseudo class

Simple example: excluding by class

Complex example: excluding by type / hierarchy

Complex example: chaining pseudo selectors

Browser Support, etc.

Examples related to html

Examples related to css

Examples related to css-selectors