Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

<html class="printable">     <body class="printable">         <h1 class="printable">Example</h1>         <nav>             <!-- Some menu links... -->         </nav>         <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>         <p class="printable">             This page is super interresting and you should print it!         </p>     </body> </html> 

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

like image 892
David Nordvall Avatar asked Feb 02 '12 09:02

David Nordvall


People also ask

How do you select non classes in CSS?

The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument.

Is it possible to make a class selector for a particular element if so how?

You can create a selector that will target specific elements with the class applied.

How do you select certain elements in CSS?

The CSS id Selector The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.


2 Answers

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.

like image 178
BoltClock Avatar answered Sep 20 '22 13:09

BoltClock


: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

    h2 {color:#fff}      :not([class]) {color:red;background-color:blue}      .fake-class {color:green}
    <h2 class="fake-class">fake-class will be green</h2>      <h2 class="">empty class SHOULD be white</h2>      <h2>no class should be red</h2>      <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>      <h2 class="">empty class2 SHOULD be white</h2>      <h2>no class2 SHOULD be red</h2>

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[]*/ 
like image 45
Milche Patern Avatar answered Sep 20 '22 13:09

Milche Patern