কোনও "সমান নয়" CSS বৈশিষ্ট্য নির্বাচনকারী খুঁজে পাচ্ছেন না


106

আমি ডিভ উপাদানগুলিকে টার্গেট করতে চাই যেখানে "foo" বৈশিষ্ট্যের একটি মান রয়েছে।

<div foo="x">XXX</div>
<div foo="">YYY</div>

আমি এই সিএসএস চেষ্টা করেছি, কিন্তু এটি কাজ করে না:

[foo!='']
{
   background: red;
}

উত্তর:


179

কোডটি এভাবে ব্যবহার করুন:

div:not([foo=''])
{
    /* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}


7

গৃহীত উত্তরের একটি সমস্যা হ'ল এটি এমন উপাদানগুলিও নির্বাচন করবে যাগুলির কোনও fooবৈশিষ্ট্যই নেই। বিবেচনা:

<div>No foo</div>
<div foo="">Empty foo</div>
<div foo="x">XXX</div>
<div foo="y">YYY</div>
<div foo="z">ZZZ</div>

div:not([foo=''])প্রথম এবং দ্বিতীয় উভয় divউপাদান নির্বাচন করবে । আপনি যদি কেবল এমন একটি divউপাদান চান যা একটি খালি স্ট্রিংয়ে সেট করা একটি অ্যাট্রিবিউট foo রয়েছে তবে আপনার ব্যবহার করা উচিত:

div[foo]:not([foo=''])

আপনি যদি অ্যাট্রিবিউটযুক্ত সমস্ত উপাদানগুলি fooনা চান yবা না চান তবে আপনার zব্যবহার করা উচিত:

div[foo]:not([foo='y']):not([foo='z'])

1

ব্যবহার করে আপনি প্রথমটি নির্বাচন করতে পারেন

[foo = 'x']{
  background:red;
}

ছোট ছোট

এটি পড়ুন


ধরুন, এখানে 100 ডিভ রয়েছে যার মধ্যে ফু ভ্যালু অনুপস্থিত (foo = '') 50 ডিভের জন্য এবং অন্যান্য 50 ডিভের আলাদা আলাদা foo ভ্যালু বলতে foo = x বা y ইত্যাদি থাকে তবে আপনারা 50 টি নির্বাচক লিখতে হবে যদি আমরা উপরের সমাধানটি অনুসরণ করি
শোয়েব চিকাতে

4
এই বিকল্পটি চায় না: "আমি সিএসএস অ্যাট্রিবিউট সিলেক্টর দিয়ে নিম্নলিখিত ডিভগুলির মধ্যে প্রথমটিই টার্গেট করতে চাই"
সুনীল হরি

আপনার উত্তর তার প্রয়োজনের সাথে সঠিক তবে অন্যান্য সমাধান যে সাধারণ সমাধান তা নয়।
শোয়েব চিকাতে

আপনি ঠিক আছেন আমি আরও জেনেরিক সমাধান চাই। আমি প্রতিফলিত করতে প্রশ্ন আপডেট।
অ্যাড্রিয়ান রোসকা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.