'If not' CSS Selectors

css, css-selectors, html

Solution

You can use the `:not()` pseudo-class, but IE8 does not support it:

.this-class:not(table), .this-class .something-else { 
    border: 1px solid red;
}

Thankfully, getting it to work for IE8 is trivial — simply apply the style to any elements with `.this-class`, and override it for the ones that are tables instead:

.this-class, .this-class .something-else { 
    border: 1px solid red;
}

table.this-class {
    border: none;
}

Notice that the `.this-class .something-else` part of your first rule remains completely separate, matching descendants of `.this-class` regardless of what type of element it is. If that is intended, you can leave that portion unchanged. Otherwise, if you want the styles to apply to descendants of `.this-class` with the same condition, you will need to repeat the condition accordingly.

Using `:not()`:

.this-class:not(table), .this-class:not(table) .something-else { 
    border: 1px solid red;
}

And using an override (for IE8):

.this-class, .this-class .something-else { 
    border: 1px solid red;
}

table.this-class, table.this-class .something-else {
    border: none;
}

Problem

So this may be ambitious, but I'm trying to solve the following problem with CSS only: ``` .this-class[if-is-not-a-table], .this-class .something-else { border: 1px solid red; } ``` Basically, I'm trying to find a way to use advanced CSS selectors to only apply a style dependent on whether or not it is NOT something else. Like apply this but only if it's not on a table element. Is this possible? NOTE: Also, this is for IE 8, so if this can be backwards compatible at all that'd be amazing!

Original source