Comment utiliser la syntaxe not() dans un sélecteur CSS?

Question

Existe-t-il des ressources sur comment utiliser la syntaxe not() dans un sélecteur CSS?

Tels que:

.container[orient="landscape"] > *:not(.toolbar) 

Si oui pouvez-vous s'il vous plaît répondre avec un lien et une explication?

Answer 1

Alt Bien que la pseudo-classe: not() soit utile dans certaines situations, elle n'est pas supportée par les navigateurs les plus récents, car elle fait partie de la spécification CSS 3. Firefox 2 et 3, Opera, Safari, Chrome et d'autres navigateurs basés sur Gecko et Webkit le supportent, alors que les navigateurs basés sur Trident (Internet Explorer) ne le supportent pas.

Il est probablement une bien meilleure idée à ce moment-ci d'utiliser la partie de CSS « ​​en cascade »:

.container[orient="landscape"] * { ... } 
.toolbar {...} 

Utilisez le sélecteur de .toolbar pour remplacer le sélecteur de .container.

Je dois également souligner que l'utilisation du sélecteur d'attribut [orient="landscape"] n'est pas prise en charge dans les anciens navigateurs, en particulier IE 6 et ci-dessous.

Voici un bon guide CSS 3 caractéristiques,: non() inclus: Smashing Magazine: Take Your Design To The Next Level With CSS3

Answer 2

Decent explanation here.

Je ne sais pas tout à fait ce que vous essayez d'accomplir avec votre exemple, mais il regarderait probablement plus comme soit

.container[orient="landscape"]:not(.toolbar) 

ou

.container[orient="landscape"] > :not(.toolbar) 

Answer 3

here's a link

i pense que cela ne fonctionne que dans FF et Safari, pas tellement dans IE

Answer 4

Je voudrais partager une observation sur la combinaison de classes de pseudo-ce qui peut être utile aux demandeurs futurs d'informations sur l'utilisation: non(). Lorsque j'utilise: not() en combinaison avec la pseudo-classe: first-line, j'ai découvert que: not() doit être listé en premier et: en première ligne après, plutôt que l'inverse. Dans l'exemple css suivant:

.content h1 { 
    font-size: 36px; 
    line-height: 34px; 
    text-transform: uppercase; 
    font-weight: bold; 
} 
.content h1:not(.second):first-line { 
    color: #971d2d; 
} 
.content h1.first { 
    color: #444; 
} 
.content h1.second { 
    color: #666; 
} 
.content h1.second:first-letter { 
    color: #030303; 
} 

Désignant « : non (.SECOND) » après la « : première ligne » non seulement ne fonctionne pas correctement, mais avoir une incidence négative d'autres déclarations dans la Cascade. Pensez à votre syntaxe comme étant dans le même ordre que si vous utilisiez un langage de script. Ainsi, quelque chose comme ceci:

if ($('h1') && !$('.second')) { 
    this.usePseudoClass(':first-line'); 
} 

aurait du sens logique pour accomplir la tâche, plutôt que quelque chose comme ceci:

if ($('h1:first-line') { 
    !(this.useClass('.second') 
} 

qui ne serait pas.

Bravo, j'espère que cette contribution sera utile aux autres.