Sélecteurs de type d'entrée CSS - Possible d'avoir une syntaxe «ou» ou «non»?


101

S'ils existent en programmation),

Si j'ai un formulaire HTML avec les entrées suivantes:

<input type="text" />
<input type="password" />
<input type="checkbox" />

Je souhaite appliquer un style à toutes les entrées qui sont soit type="text"ou type="password".

Sinon, je me contenterais de toutes les entrées où type != "checkbox".

Il me semble que je dois faire ceci:

input[type='text'], input[type='password']
{
   // my css
}

N'y a-t-il pas un moyen de faire:

input[type='text',type='password']
{
   // my css
}

ou

input[type!='checkbox']
{
   // my css
}

J'ai jeté un coup d'œil et il ne semble pas qu'il y ait un moyen de le faire avec un seul sélecteur CSS.

Pas grand-chose bien sûr, mais je suis juste un chat curieux.

Des idées?

Réponses:


183

CSS3 a une pseudo-classe appelée : not ()

input:not([type='checkbox']) {    
    visibility: hidden;
}
<p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>
    	                              
<ul>
  <li>text: (<input type="text">)</li>  
  <li>password (<input type="password">)</li>    	
  <li>checkbox (<input type="checkbox">)</li> 
 </ul>


Sélecteurs multiples

Comme Vincent l'a mentionné, il est possible d'enchaîner plusieurs :not()s ensemble:

input:not([type='checkbox']):not([type='submit'])

CSS4, qui n'est pas encore largement pris en charge , permet plusieurs sélecteurs dans un:not()

input:not([type='checkbox'],[type='submit'])


Support hérité

Tous les navigateurs modernes prennent en charge la syntaxe CSS3. Au moment où cette question a été posée, nous avions besoin d'une solution de secours pour IE7 et IE8. Une option était d'utiliser un polyfill comme IE9.js . Un autre était d'exploiter la cascade en CSS:

input {
   // styles for most inputs
}   

input[type=checkbox] {
  // revert back to the original style
} 

input.checkbox {
  // for completeness, this would have worked even in IE3!
} 

1
joli! Merci. ce sélecteur CSS3 est-il entièrement pris en charge? (Je ne me soucie vraiment que de IE7 +, FF3 +, Safari récent, Chrome récent)
RPM1984

1
Il est pris en charge dans IE9 + et tous les autres navigateurs modernes. quirksmode.org/css/contents.html#t37
Patrick McElhaney

12
Par souci d'exhaustivité, si vous voulez faire plusieurs "not", voici la syntaxe à utiliser: input: not ([type = 'checkbox']): not ([type = 'submit'])
Vincent

25
input[type='text'], input[type='password']
{
   // my css
}

C'est la bonne façon de procéder. Malheureusement, CSS n'est pas un langage de programmation.


4
Vous pouvez cependant utiliser Less CSS ou Sass.
vbullinger

Moins, oui! J'aime cela.
Bartłomiej Zalewski
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.