web-dev-qa-db-fra.com

Pas de sélecteurs CSS

Existe-t-il une sorte de sélecteur CSS "pas"?

Par exemple, lorsque j'écris la ligne suivante dans mon CSS, tous les champs de saisie à l'intérieur d'une balise de classe nom de classe auront un fond rouge.

.classname input {
  background: red;
}

Comment puis-je sélectionner tous les champs de saisie EXTÉRIEURS à une balise de classe nom de classe?

csscss-selectors
69
BlaM


Avec le support CSS actuel du navigateur, vous ne pouvez pas.

Les nouveaux navigateurs le prennent désormais en charge - voir Réponse de Sam pour plus d'informations.

(Voir les autres réponses pour les alternatives en CSS.)


Si le faire en JavaScript/jQuery est acceptable, vous pouvez faire:

$j(':not(.classname)>input').css({background:'red'});
51
Peter Boughton

Mozilla prend en charge pseudo-classe de négation :

:not(.classname) input {background: red;}

Voir aussi: http://developer.mozilla.org/en/Mozilla_CSS_support_chart

32
ultracrepidarian

Notez que la pseudo-classe de négation est dans la recommandation des sélecteurs de niveau et fonctionne dans les versions récentes de Firefox, Chrome et Safari (au moins). Exemple de code ci-dessous.

<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
    div {
    border: 1px solid green;
    height: 10px;
    }
    div:not(#foo) {
    border: 1px solid red;
    }
</style>
</head>
<body>
    <div id="foo"></div>
    <div id="bar"></div>
    <div id="foobar"></div>
</body>
</html>
29
Sam Dutton

Ne le feriez-vous pas en définissant l'arrière-plan "global" sur rouge, puis en utilisant le nom de classe pour modifier les autres?

input { background: red; }
.classname input { background: white; }
24
Harper Shelby

Je ferais ça

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
10
Daniel A. White

Il n'y a aucun moyen de sélectionner le parent des éléments correspondants avec CSS. Vous devez utiliser JavaScript pour les sélectionner.

D'après votre question, je suppose que vous avez un balisage qui ressemble plus ou moins à ceci:

<form class="formclassname">
    <div class="classname">
        <input />  <!-- Your rule matches this -->
        <input />  <!-- Your rule matches this -->
    </div>
    <input />  <!-- You want to select this? -->
    <input />  <!-- You want to select this? -->
</form>

Une option consiste à ajouter une classe à un élément supérieur, par exemple le <form> et écrivez une règle pour styliser toutes les entrées du formulaire. C'EST À DIRE:

.formclassname input {
  /* Some properties here... */
}

Ou

.formclassname > input {
  /* Some properties here... */
}

Si vous souhaitez les sélectionner en fonction du fait qu'ils ne sont pas à l'intérieur d'un élément avec une classe spécifique, vous n'avez pas de chance sans utiliser JavaScript.

1
Zack The Human

Je pense que le plus proche que vous pouvez obtenir est d'affecter uniquement les descendants directs avec une déclaration

Ce code, par exemple, n'affectera que les champs de saisie directement sous divs avec la classe "maincontent"

div.maincontent > input {
  // do something
}
0
Dan Roberts

Les entrées sont un peu ennuyeuses car, contrairement à la plupart des autres éléments html, il n'y a pas nécessairement un moyen de réinitialiser toutes les propriétés css à leur valeur par défaut.

Si le style n'est pas critique (c'est-à-dire qu'il est agréable d'avoir mais n'affecte pas la fonctionnalité), j'utiliserais jQuery pour obtenir un tableau de toutes les entrées, vérifier leurs parents, puis effectuer uniquement le style sur ceux en dehors de cette div. Quelque chose comme:

$('input').each(function() {
     if($(this).closest('.classname') == false)
     {
           // apply css styles
     }
});

(Soit dit en passant, je ne suis pas un expert de jQuery, il peut donc y avoir des erreurs dans ce qui précède, mais en principe, quelque chose comme ça devrait fonctionner)

0
wheresrhys