Comment puis-je cibler des éléments d’entrée qui ne font pas partie d’une classe spécifique en CSS ?

Sélecteurs CSS sans négation

En CSS, la sélection d'éléments qui ne correspondent pas à certains critères peut être difficile en raison de l'absence de " pas" sélecteur. Cette limitation est reconnue par les développeurs Web depuis des années, les obligeant à rechercher des solutions alternatives.

Considérez la règle CSS suivante :

.classname input {
  background: red;
}

Cette règle attribue un fond rouge à tous les champs de saisie dans Éléments HTML portant le nom de classe « classname ». Cependant, supposons que vous vouliez exclure les champs de saisie des éléments « nom de classe » du style d'arrière-plan rouge. Comment y parvenir ?

Prise en charge actuelle des navigateurs

Malheureusement, les navigateurs Web actuels ne prennent pas en charge les sélecteurs négatifs en CSS. L'exemple fourni ne peut pas être réalisé en utilisant CSS seul.

Solutions alternatives

Bien que CSS ne dispose pas de sélecteur négatif, des solutions alternatives existent :

• Utilisez JavaScript ou jQuery : Les frameworks JavaScript comme jQuery proposent des méthodes comme :not() pour sélectionner des éléments qui ne correspondent pas à un critère spécifique.

<code class="js">$j(':not(.classname)>input').css({background:'red'});</code>

• Règles imbriquées : En utilisant des règles imbriquées, vous pouvez exclure indirectement des éléments spécifiques d'un style :

input {
  background: #ccc;
}

.classname input {
  background: red;
}

Dans cet exemple, tous les champs de saisie ont un fond gris par défaut. Dans les éléments portant le nom de classe « classname », les champs de saisie remplacent ce style par un arrière-plan rouge. Notez que cette approche affecte le style de tous les champs de saisie au sein de l'élément "classname", quel que soit leur emplacement.

Il est important de noter que même si la prise en charge par les navigateurs des sélecteurs négatifs CSS est débattue depuis des années, il existe toujours aucune mise en œuvre officielle à ce jour. À mesure que les technologies de navigation continuent d'évoluer, cette fonctionnalité pourrait devenir disponible à l'avenir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!