Naviguer dans les sélecteurs CSS sans "Not" : sélection de champs de saisie externes

En CSS, le sélecteur "not" est une fonctionnalité recherchée cela permettrait aux utilisateurs d'exclure des éléments spécifiques des critères de correspondance. Actuellement, cette fonctionnalité n'est pas disponible dans les navigateurs à moins que JavaScript/jQuery ne soit utilisé.

Par exemple, pour sélectionner tous les champs de saisie d'un élément avec la classe « classname », le code CSS serait :

.classname input {
  background: red;
}

Pour contrer cela, la prochaine étape logique serait d'exclure les champs de saisie dans l'élément "classname". Cependant, en raison de l'absence de sélecteur « non », cela n'est pas possible sans approches alternatives.

L'une de ces alternatives est JavaScript/jQuery, comme le démontre le code suivant :

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

Ce code sélectionne tous les champs de saisie qui ne sont pas des descendants d'éléments avec la classe "classname". Il obtient efficacement le résultat souhaité en appliquant un arrière-plan rouge à tous les champs de saisie en dehors de l'élément "classname".

Bien que CSS ne dispose pas d'un sélecteur "not", la disponibilité de JavaScript/jQuery offre une solution à cette limitation , permettant une sélection et une modification précises des éléments en fonction de critères spécifiques.