একাধিক ক্লাসের ভিত্তিতে উপাদান নির্বাচন করুন

Question

আমার একটি স্টাইলের নিয়ম আছে আমি যখন ট্যাগটিতে দুটি ক্লাস করি তখন আমি তা প্রয়োগ করতে চাই । জাভাস্ক্রিপ্ট ছাড়াই এটি সম্পাদন করার কোনও উপায় আছে? অন্য কথায়:

<li class='left ui-class-selector'>

আমি আমার শৈলীর নিয়মটি কেবল তখনই প্রয়োগ করতে চাই যদি liউভয় .leftএবং .ui-class-selectorশ্রেণি উভয়ই প্রয়োগ থাকে।

Comments

css-tricks.com/m Multiple - class - id - selectors - ডাবল ক্লাস সিলেক্টর দেখুন

— ফার্স্টপোস্টকমেন্টার

Answer 1

তুই দুইটা ক্লাস মানে? নির্বাচকদের "চেইন" (তাদের মধ্যে কোনও ফাঁক নেই):

.class1.class2 {
    /* style here */
}

এই নির্বাচন দিয়ে সব উপাদান class1যে আছে class2।

আপনার ক্ষেত্রে:

li.left.ui-class-selector {

}

অফিসিয়াল ডকুমেন্টেশন: সিএসএস 2 শ্রেণি নির্বাচক ।

---

আকামাইক যেমন ইন্টারনেট এক্সপ্লোরার 6 এ এই পদ্ধতির কোনও সমস্যা দেখায় আপনি এটি পড়তে চাইতে পারেন: আই 6 সিএসএসে ডাবল ক্লাস ব্যবহার করবেন?

Comments

দয়া করে নোট করুন যে আই 6 এগুলি পছন্দ করে না, কারণ এটি ক্লাসগুলির শৃঙ্খলাটি পড়ে না। এটি কেবল চেইনে শেষ শ্রেণীর দিকে নজর দেবে।

— আকামিকে

এটি নয় :) সমস্ত বড় ওয়েবসাইটগুলি নেমে গেছে, নেমে যাচ্ছে বা আই 6-এর জন্য অদূর ভবিষ্যতে সমর্থন কমানোর পরিকল্পনা করছে .. একই কাজ করুন!

— থমাস বনিনি

@ আন্ড্রেয়াস বনিনি: হ্যাঁ আমি জানি। সত্যি কথা বলতে আমি ইতিমধ্যে দীর্ঘসময় ধরে আই 6 সম্পর্কে চিন্তা করি না। (আমি আমার আগের মন্তব্যটি মুছে ফেলেছি কারণ আমি এই সমস্যাটির সাথে সম্পর্কিত অন্য প্রশ্নটি পেয়েছি))

— ফেলিক্স ক্লিং

হ্যাঁ, আপনি এগুলিকে আইই all এ মোটেই ব্যবহার করতে পারবেন না, কেবল আপনার উপাদানগুলিকে স্টাইল করার জন্য আরও দীর্ঘ পথ ধরুন। উদাহরণস্বরূপ, প্রতিটি শ্রেণিকে আলাদা আলাদাভাবে স্টাইল করা এবং যথাসময়ে যথাসময়ে ওভাররাইড করার জন্য উপযুক্ত সিএসএস নির্দিষ্টতা ব্যবহার করা।

— আকামিকে

আমি স্মরণে আই 6 এর কবরে নাচ মনে করি। এই বছরও আমাকে IE10 সমর্থন করতে হয়নি, এবং সম্পূর্ণরূপে IE বাদ দেওয়া দিগন্তের দিকে। আমি ভবিষ্যত ভালবাসি। ☺

— মাইকেল শ্যাপার

Answer 2

চেইন নির্বাচকরা কেবল ক্লাসের মধ্যে সীমাবদ্ধ নয়, আপনি এটি উভয় ক্লাস এবং আইডির জন্য করতে পারেন।

ক্লাস

.classA.classB {
/*style here*/
}

ক্লাস ও আইডি

.classA#idB {
/*style here*/
}

আমি করেছিলাম

#idA#idB {
/*style here*/
}

সমস্ত ভাল বর্তমান ব্রাউজারগুলি IE 6 বাদে এটি সমর্থন করে, এটি তালিকার শেষ নির্বাচকটির উপর ভিত্তি করে নির্বাচন করে। সুতরাং ".classA.classB" কেবল ".classB" এর উপর ভিত্তি করে নির্বাচন করবে।

আপনার ক্ষেত্রে

li.left.ui-class-selector {
/*style here*/
}

অথবা

.left.ui-class-selector {
/*style here*/
}

Comments

আইডি এবং আইডি একটি ধারণাগতভাবে অদ্ভুত নির্বাচক।

— ফলিক্স গ্যাগন-গ্রেনিয়ার

Answer 3

আপনি এই সমাধানগুলি ব্যবহার করতে পারেন:

সিএসএস বিধিগুলি এমন দুটি ট্যাগের ক্ষেত্রে প্রযোজ্য যা নিম্নলিখিত দুটি শ্রেণি রয়েছে:

.left.ui-class-selector {
    /*style here*/
}

<li>নিম্নলিখিত দুটি শ্রেণীর সাথে থাকা সমস্ত ট্যাগের জন্য সিএসএস বিধি প্রযোজ্য :

li.left.ui-class-selector {
   /*style here*/
}

jQuery সমাধান:

$("li.left.ui-class-selector").css("color", "red");

জাভাস্ক্রিপ্ট সমাধান:

document.querySelector("li.left.ui-class-selector").style.color = "red";