Obviously it's possible to match only tags with a certain class, but is it possible to match only tags with no class? I can think of maybe div[class=""], but I have a hunch that won't work, and I can't really test it at the moment

  • div[class=""] will apply to divs with class set but empty, e.g <div class=""> as I understand it. Tony Crockford over 7 years ago
  • Thanks, that's what I figured. Jonathan Castello over 7 years ago
  • That's correct, Tony. Michael over 7 years ago

3 answers

Michael 45
5
points
This was chosen as the best answer

The only way I can think of using CSS most browsers could read would be this:

div {
  /* set styles here */
  }

div[class] {
  /* reset styles here */
  }

There is a CSS3 way to do this, using the following:

div:not([class]) {
  /* set styles here */
  }

But only newer browsers (IE8+ and Firefox 3 that I know of) support it.

Answered over 7 years ago by Michael
  • Ah, this is perfect. Thanks! Jonathan Castello over 7 years ago
  • To clarify: this is perfect because the div/div[class] come as a package, and don't require anything of the class-specific definitions to reset what the no-class selector added. It seems very clean and tidy to me! Jonathan Castello over 7 years ago
  • NIce, voted it up, becuase in ten years of using CSS I never needed to use it, but it's nice to know that I could if I wanted to! Tony Crockford over 7 years ago
2
points

I can only guess at the reason you're asking for this, but generally you would apply your styles to the parent for all elements of a certain type and then use class to over-ride those styles.

so if you did

body div{
    border: 1px solid red;
}

then all div's would have a red border unless you apply a different border using class or id.

maybe if you could explain more about the 'why' you are asking?

The C in CSS stands for cascading and means everything has a default style, which you then over-ride, so asking the question about elements not having a class is a bit odd, unless you're using jQuery or something?

However, Eric Meyer did some work on diagnostic css which might be of interest to you:

http://24ways.org/2007/diagnostic-styling

and some more info here:

http://css-discuss.incutio.com/?page=DiagnosticCss

Answered over 7 years ago by Tony Crockford
  • Scholastic interest, nothing practical per se. Thanks for the pointers! Jonathan Castello over 7 years ago
  • You said "I can only guess at the reason you're asking for this" - I've done it before myself for many reasons, the main one being it results in much cleaner css than setting it then unsetting it on all classed elements, and much cleaner html than giving the majority of the tags a class. Michael over 7 years ago
  • I understand, I think, but I vary rarely give the majority of tags a class. I set defaults, then over-ride only where needed. applying styling to elements that don't have a class set is something I've never done *after* I've set up my defaults. it's an interesting technique though. Tony Crockford over 7 years ago
0
points

What about the following? It selects a bit too much (e.g., HTML, HEAD, etc.), but it gets all elements everywhere regardless of parentage.

$("*")
  .filter
  (
    function()
    {
      var wrapped = $(this);                    
      return typeof(wrapped.attr("class")) == "undefined" || wrapped.attr("class").length === 0;
    }
  )
  .each
  (
    function()
    {
      alert(this.id);
    }
  );
Answered over 7 years ago by David Andres
  • I realize now that you're looking for a CSS-specific solution. So what I've posted is not all that helpful. The CSS3 approach shown before should work in IE7 as well as the newer browsers. Just be sure that compatibility/quirks mode has been turned off for the page in question. David Andres over 7 years ago
  • Thanks for the effort anyways, I appreciate it. I'm sure some other lost designer will find your answer useful eventually ;) Jonathan Castello over 7 years ago