Comment créer une règle css pour tous les éléments sauf une classe?

95

J'ai créé une feuille de style CSS pour mon projet. Existe-t-il un moyen de créer une règle css qui s'applique à tous les éléments de table SAUF les éléments de table appartenant à la classe "dojoxGrid"? Quelque chose comme:

.not(dojoxGrid) table{
    width:100%;
    border-top:1px solid #dddddd;
    border-left:1px solid #dddddd;
    border-right:1px solid #dddddd;
    margin:1em auto;
    border-collapse:collapse;
}
css css-selectors pseudo
la source
En avez-vous besoin pour fonctionner avec plusieurs navigateurs? Les navigateurs ont un support différent pour les sélecteurs CSS plus flexibles. Cela peut être quelque chose que vous pouvez faire dans un script si cela est absolument nécessaire et doit être multi-navigateur.
kibibu
oui j'en ai besoin pour fonctionner sur les principaux navigateurs. Y a-t-il un autre moyen d'y parvenir plutôt que par le biais de scripts? cheers
Nick
L'approche de Cori fonctionnera sur les navigateurs depuis Ie4, peut-être plus tôt.
kibibu

Réponses:

183

La pseudo-classe de négation semble être ce que vous recherchez.

table:not(.dojoxGrid) {color:red;}

Cependant, il n'est pas pris en charge par ≤ IE8 .

Knu
la source
2
c'est un bon sélecteur css3 à connaître - j'espère utilisable dans IE9.
cori
4
bien que mon commentaire ne soit pas directement applicable à la question, il convient de noter que :notPEUT être utilisé comme sélecteur jquery. c'est à dire $("[data-name='bob']:not(a)"), ce qui est agréable.
gingerbreadboy
3
Cela devrait être la réponse acceptée, car c'est la réponse à l'effet souhaité. La réponse actuellement acceptée est une autre manière d'obtenir l'effet souhaité, mais ne répond pas vraiment à la question. Les personnes qui trouvent cette question recherchent très probablement la réponse à ce qui est exactement demandé, dans la plupart des cas, une solution alternative ne s'applique pas.
Pedro Moreira
Dans ≤IE8, cela sera complètement ignoré, forçant aucune table à obtenir color:red. Cela pourrait être bon pour certains, mais pour moi, j'espérais qu'il le lirait comme table {color:red;}et ignorerait le :not().
DutGRIFF
7
@FranciscoCorralesMorales :not(.classOne):not(.classTwo)cf stackoverflow.com/a/5684168/248058
Knu
12

Est-ce que la définition d'une règle css pour toutes les tables, puis une règle suivante pour les tables où class = "dojoxGrid" ne fonctionnerait pas? Ou est-ce que je manque quelque chose?

cori
la source
3
Oui, cela fonctionnerait parfaitement, mais vous définiriez toutes ces propriétés sur une valeur. Si vous vouliez les laisser "non définis", non. Vraisemblablement, Nick essaie de ne pas écraser les valeurs de dojoxGrid telles qu'elles sont définies ailleurs.
kibibu
1
Je pense que ce serait le cas. Cependant, je définis un tas de propriétés pour toutes les tables, je pourrais à nouveau les écraser avec les valeurs par défaut nécessaires pour le dojoxGrid. Cependant, je ne sais pas quelles sont ces valeurs par défaut car elles sont générées par la bibliothèque dojo. Je cherchais donc un autre moyen d'y parvenir.
Nick
4

Le pari le plus sûr est de créer une classe sur ces tables et de l'utiliser. Il est peu probable que quelque chose comme ça fonctionne dans tous les principaux navigateurs.

Joël
la source