CSS Giriş Tipi Seçiciler - "veya" veya "değil" sözdizimine sahip olmak mümkün mü?


101

Programlamada mevcutlarsa),

Aşağıdaki girdileri içeren bir HTML formum varsa:

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

type="text"Veya olan tüm girdilere bir stil uygulamak istiyorum type="password".

Alternatif olarak, tüm girdilerin nerede olduğuna karar verirdim type != "checkbox".

Görünüşe göre bunu yapmam gerekiyor:

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

Yapmanın bir yolu yok mu:

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

veya

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

Etrafa bir göz attım ve bunu tek bir CSS seçici ile yapmanın bir yolu yok gibi görünüyor.

Elbette önemli değil, ama ben sadece meraklı bir kediyim.

Herhangi bir fikir?

Yanıtlar:


183

CSS3'ün sözde bir sınıfı vardır : 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>


Çoklu seçiciler

Vincent'ın bahsettiği gibi, birden çok :not()s'yi bir araya getirmek mümkündür :

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

Henüz yaygın olarak desteklenmeyen CSS4, bir:not()

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


Miras yardımı

Tüm modern tarayıcılar CSS3 sözdizimini destekler. Bu soru sorulduğunda, IE7 ve IE8 için bir geri dönüşe ihtiyacımız vardı. Seçeneklerden biri, IE9.js gibi bir çoklu dolgu kullanmaktı . Bir diğeri de CSS'deki kaskaddan yararlanmaktı:

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
güzel bir! Teşekkürler. CSS3 seçici tam olarak destekleniyor mu? (Yalnızca IE7 +, FF3 +, Safari yakın zamanda, Chrome son zamanlarda gerçekten önemsiyorum)
RPM1984

1
IE9 + ve diğer tüm modern tarayıcılarda desteklenir. quirksmode.org/css/contents.html#t37
Patrick McElhaney

12
Tamlık adına, birden çok "not" yapmak istiyorsanız, o zaman bu kullanılacak sözdizimidir: input: not ([type = 'checkbox']): not ([type = 'submit'])
Vincent

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

Bunu yapmanın doğru yolu budur. Ne yazık ki CSS bir programlama dili değil.


4
Yine de Less CSS veya Sass kullanabilirsiniz.
vbullinger

Daha az, evet! Onu seviyorum.
Bartłomiej Zalewski
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.