"Если нет" Селектора CSS

Так что это может быть амбициозным, но я пытаюсь решить следующую проблему только с помощью CSS:

.this-class[if-is-not-a-table], .this-class .something-else { 
    border: 1px solid red;
}

В основном, я пытаюсь найти способ использования расширенных селекторов CSS, чтобы применять только стиль, зависящий от того, является ли он НЕ чем-то другим. Например, примените это, но только если это не элемент таблицы. Возможно ли это?

ПРИМЕЧАНИЕ. Кроме того, это для IE 8, поэтому, если это может быть обратно совместимо во всем, что было бы потрясающе!

Ответ 1

Вы можете использовать псевдокласс :not(), но IE8 его не поддерживает:

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

К счастью, заставить его работать для IE8 тривиально - просто примените стиль к любым элементам с помощью .this-class и переопределите его для тех, которые вместо таблиц:

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

table.this-class {
    border: none;
}

Обратите внимание, что часть .this-class .something-else вашего первого правила остается полностью отдельной, сопоставляя потомки .this-class независимо от того, какой тип элемента она есть. Если это предназначено, вы можете оставить эту часть без изменений. В противном случае, если вы хотите, чтобы стили применялись к потомкам .this-class с тем же условием, вам нужно будет соответствующим образом повторить условие.

Использование :not():

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

И используя переопределение (для IE8):

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

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

Ответ 2

:not() - это то, что вы ищете:

В вашем случае это:

.this-class:not(table), .this-class .something-else {

Как отметил @ajp15243, :not() не поддерживается в IE8 и ниже.

Ответ 3

AFAIK :not не поддерживается в IE8

Лучшее, что я могу предложить:

.this-class { 
    border: 1px solid red;
}
table.this-class {
    border: 1px solid black;
}

Ответ 4

Вы можете использовать селектор :not(). Другими словами:

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

Общий пример: JSFiddle

Ответ 5

Вы можете использовать селектор :not .

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

Пример Jsfiddle