সিএসএস ইনপুট ধরণের নির্বাচক - একটি "বা" বা "না" সিনট্যাক্স পাওয়া সম্ভব?


101

যদি সেগুলি প্রোগ্রামিংয়ে উপস্থিত থাকে),

নিম্নলিখিত ইনপুটগুলির সাথে যদি আমার একটি HTML ফর্ম থাকে:

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

আমি সমস্ত ইনপুটগুলিতে স্টাইল প্রয়োগ করতে চাই যা হয় হয় type="text"বা হয় type="password"

বিকল্পভাবে, আমি সমস্ত ইনপুট যেখানেই স্থির করব type != "checkbox"

মনে হচ্ছে এটি করতে হবে:

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

করার কোন উপায় নেই:

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

অথবা

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

আমার চারপাশে নজর ছিল এবং একক সিএসএস সিলেক্টরের সাথে এটি করার কোনও উপায় আছে বলে মনে হয় না।

খুব বড় বিষয় অবশ্যই নয়, তবে আমি কেবল একটি কৌতূহলী বিড়াল।

কোন ধারনা?

উত্তর:


183

CSS3 এর সিউডো-ক্লাস রয়েছে : নয় ()

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>


একাধিক নির্বাচক

ভিনসেন্ট যেমন উল্লেখ করেছেন, :not()একসাথে একাধিক স্ট্রিং করা সম্ভব :

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

CSS4, যা এখনও ব্যাপকভাবে সমর্থিত নয় , এ এ একাধিক নির্বাচককে অনুমতি দেয় allows:not()

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


উত্তরাধিকার সমর্থন

সমস্ত আধুনিক ব্রাউজার CSS3 সিনট্যাক্স সমর্থন করে। এই প্রশ্নটি যখন জিজ্ঞাসা করা হয়েছিল, তখন আমাদের আইই 7 এবং আইই 8 এর জন্য একটি পিছনে পড়া দরকার। একটি বিকল্প মত একটি polyfill ব্যবহার করতে ছিল IE9.js । আর একটি হ'ল সিএসএসে ক্যাসকেডটি কাজে লাগানো:

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
সুন্দর! ধন্যবাদ। সিএসএস 3 নির্বাচনকারী কি পুরোপুরি সমর্থিত? (আমি কেবলমাত্র আই 7 +, এফএফ 3 +, সাফারি সাম্প্রতিক, ক্রোম সাম্প্রতিককালে
যত্নশীল

1
এটি IE9 + এবং অন্যান্য সমস্ত আধুনিক ব্রাউজারে সমর্থিত। quirksmode.org/css/contents.html#t37
প্যাট্রিক ম্যাকলেহানী

12
সম্পূর্ণতার জন্য যদি আপনি একাধিক "না" করতে চান তবে এটি ব্যবহারের বাক্য গঠন: ইনপুট: নয় ([টাইপ = 'চেকবক্স']): নয় ([টাইপ = 'সাবমিট'])
ভিনসেন্ট

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

এটি করার সঠিক উপায়। দুঃখের বিষয় সিএসএস কোনও প্রোগ্রামিং ভাষা নয়।


4
যদিও আপনি কম সিএসএস বা স্যাস ব্যবহার করতে পারেন।
ভবলিংগার

কম, হ্যাঁ! আমি এটা ভালোবাসি.
বার্তোমিজেজ জালিউস্কি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.