উভয় শ্রেণির নির্বাচককে শৃঙ্খলাবদ্ধ করুন (এর মধ্যে কোনও স্থান ছাড়াই):
.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] -->
পাদটিকা:
- সমর্থিত ব্রাউজারগুলি:
- এই উপাদানটি হিসাবে কেবল শ্রেণি নেই হিসাবে নির্বাচিত হয়নি
foo
।
- এই উপাদান হিসাবে নির্বাচিত উভয় ক্লাস
foo
এবং bar
।
- এই উপাদানটি হিসাবে কেবল শ্রেণি নেই হিসাবে নির্বাচিত হয়নি
bar
।
- IE6:
- এই উপাদানটির শ্রেণি নেই বলে নির্বাচন করা হয়নি
bar
।
bar
তালিকাভুক্ত অন্য কোনও শ্রেণি নির্বিশেষে এই উপাদানটিকে শ্রেণীবদ্ধ হিসাবে নির্বাচন করা হয়েছে ।