সিএসএস নির্বাচনকারী যা দুটি শ্রেণীর সাথে উপাদানগুলিতে প্রয়োগ হয়


471

দুটি নির্দিষ্ট ক্লাসে সেট করা শ্রেণীর বৈশিষ্ট্যের মানের উপর ভিত্তি করে CSS সহ কোনও উপাদান নির্বাচন করার কোনও উপায় আছে কি? উদাহরণস্বরূপ, ধরা যাক আমার 3 ডিভ রয়েছে:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

এটি সিএসএস কী কেবল লিখতে পারে তালিকার কেবলমাত্র দ্বিতীয় উপাদানটি, এই ভিত্তিতে যে এটি foo এবং বার উভয় শ্রেণিরই সদস্য?

উত্তর:


735

উভয় শ্রেণির নির্বাচককে শৃঙ্খলাবদ্ধ করুন (এর মধ্যে কোনও স্থান ছাড়াই):

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

আপনার যদি এখনও আই 6 এর মতো প্রাচীন ব্রাউজারগুলির সাথে ডিল করতে হয় তবে সচেতন হন যে এটি শৃঙ্খলাবদ্ধ শ্রেণি নির্বাচকদের সঠিকভাবে না পড়ে: আপনি কেবল অন্য শ্রেণীর তালিকাভুক্ত না করেই কেবল শেষ শ্রেণির নির্বাচক ( .barএই ক্ষেত্রে) পড়বেন ।

অন্যান্য ব্রাউজার এবং আই 6 কীভাবে এটি ব্যাখ্যা করে তা বর্ণনা করার জন্য এই সিএসএসটি বিবেচনা করুন:

* {
    color: black;
}

.foo.bar {
    color: red;
}

সমর্থিত ব্রাউজারগুলিতে আউটপুট হ'ল:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

আই 6 এ আউটপুটটি হ'ল:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

পাদটিকা:

  • সমর্থিত ব্রাউজারগুলি:
    1. এই উপাদানটি হিসাবে কেবল শ্রেণি নেই হিসাবে নির্বাচিত হয়নিfoo
    2. এই উপাদান হিসাবে নির্বাচিত উভয় ক্লাস fooএবং bar
    3. এই উপাদানটি হিসাবে কেবল শ্রেণি নেই হিসাবে নির্বাচিত হয়নিbar

  • IE6:
    1. এই উপাদানটির শ্রেণি নেই বলে নির্বাচন করা হয়নি bar
    2. barতালিকাভুক্ত অন্য কোনও শ্রেণি নির্বিশেষে এই উপাদানটিকে শ্রেণীবদ্ধ হিসাবে নির্বাচন করা হয়েছে ।

3
আমি তাদের যে আদেশটি দিয়েছি তাতে কি আসে যায়?
আদম

3
এটা কোন ব্যাপার না। (এটি
আই 6 এর

6
তাদের মধ্যে কোনও জায়গা নেই বলে কী আসে যায়?
কোডিবাগস্টাইন

26
@ ইম্রে: হ্যাঁ, স্থানটি একটি বংশধর নির্বাচককে উপস্থাপন করে, যা প্রতিটি শ্রেণি নির্বাচককে আলাদা উপাদানকে উপস্থাপন করে। তবে আমরা এখানে একটি একক উপাদান সম্পর্কে কথা বলছি।
বোল্টক্লক

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