Sélecteurs CSS "If not" (si non)

Question

C'est peut-être ambitieux, mais j'essaie de résoudre le problème suivant en utilisant uniquement des CSS :

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

En gros, j'essaie de trouver un moyen d'utiliser des sélecteurs CSS avancés pour n'appliquer un style que s'il n'est PAS quelque chose d'autre. Par exemple, appliquer ceci mais seulement s'il n'est pas sur un élément de tableau. Cela est-il possible ?

REMARQUE : également, ceci est pour IE 8, donc si cela peut être rétrocompatible, ce serait génial !

Answer 1

Vous pouvez utiliser le :not() pseudo-classe mais IE8 ne le prend pas en charge :

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

Heureusement, le faire fonctionner pour IE8 est trivial - il suffit d'appliquer le style à tous les éléments avec .this-class et le remplacer pour ceux qui sont à la place :

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

table.this-class {
    border: none;
}

Notez que le .this-class .something-else la partie de votre première règle reste complètement séparée, en faisant correspondre les descendants des .this-class quel que soit le type d'élément. Si tel est le but recherché, vous pouvez laisser cette partie inchangée. Sinon, si vous souhaitez que les styles s'appliquent aux descendants de l'élément .this-class avec la même condition vous devrez répéter la condition en conséquence.

Utilisation de :not() :

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

Et en utilisant une dérogation (pour IE8) :

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

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

Answer 2

:not() est ce que vous recherchez :

Dans votre cas, c'est :

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

Comme l'a noté @ajp15243, :not() n'est pas pris en charge par IE8 et les versions inférieures.

Answer 3

AFAIK :not n'est pas pris en charge par IE8

Le mieux que je puisse offrir est :

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

Answer 4

Vous pouvez utiliser le :not() sélecteur. En d'autres termes :

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

Un exemple générique : JSFiddle

Answer 5

Vous pouvez utiliser le :not sélecteur .

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

Exemple de Jsfiddle