সিএসএস সিলেক্টারে নির্দিষ্ট শ্রেণীর নাম কীভাবে বাদ দেওয়া যায়?

Question

আমি পটভূমি-রঙ প্রয়োগ করতে যখন একজন ব্যবহারকারী মাউস হোভার উপাদান যার বর্গ নাম চেষ্টা করছি "reMode_hover"।

কিন্তু আমি রং পরিবর্তন করতে না চান তাহলে উপাদান এছাড়াও রয়েছে"reMode_selected"

দ্রষ্টব্য: আমি কেবল জাভাস্ক্রিপ্ট নয় সিএসএস ব্যবহার করতে পারি কারণ আমি সীমিত পরিবেশের মধ্যে কাজ করছি।

স্পষ্ট করার জন্য, আমার লক্ষ্য হওভারের প্রথম উপাদানটিকে রঙ করা তবে দ্বিতীয় উপাদানটি নয়।

এইচটিএমএল

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

প্রথম সংজ্ঞাটি কার্যকর হবে আশা করে আমি নীচে চেষ্টা করেছি তবে তা হয় না। আমি কি ভুল করছি?

সিএসএস

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}

Answer 1

এক উপায় হ'ল একাধিক শ্রেণীর নির্বাচক (যে বংশধর নির্বাচক হিসাবে স্থান নেই):

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Comments

এটি হওয়া উচিত নয়: .reMode_hover: না ('। reMode_selected'): হোভার আমার অভিজ্ঞতায় সেই উক্তিগুলি প্রয়োজনীয়।

— মাকান তায়েবী

@ মকনতায়েবি আপনি নির্বাচককে চারপাশে উদ্ধৃতি সম্পর্কিত একটি চমৎকার বক্তব্য উত্থাপন করেছেন। টিএল; ডিআর: এগুলি ব্যবহার করা ভাল is স্ট্যাকওভারফ্লো . com/a/5578880/1772379 এ পুরো ব্যাখ্যা ।

— বেন জনসন

এটা কি এখন ও সেই ঘটনা? অন্যান্য ব্রাউজারগুলিতে এটি চেষ্টা করে দেখেনি, তবে ফায়ারফক্সের সর্বশেষ সংস্করণে যে আমি কাজ করছি, :notনির্বাচক কেবল তখনই কাজ করেছিলেন যখন আমি উদ্ধৃতিগুলি সরিয়েছি ।

— অ্যালেক্স রুম্মেল

Answer 2

আধুনিক ব্রাউজারগুলিতে আপনি এটি করতে পারেন:

.reMode_hover:not(.reMode_selected):hover{}

সামঞ্জস্যতার তথ্যের জন্য http://caniuse.com/css-sel3 পরামর্শ নিন ।

Answer 3

পদ্ধতি 1

আপনার কোড সহ সমস্যা হল আপনি নির্বাচন করা হয় .remode_hoverএকটি হল যে বংশধর এর .remode_selected। সুতরাং আপনার কোডটি সঠিকভাবে কাজ করার প্রথম অংশটি সেই স্থানটি সরিয়ে দেওয়া

.reMode_selected.reMode_hover:hover

তারপরে, শৈলীটি কাজ না করার জন্য পেতে আপনাকে দ্বারা নির্ধারিত স্টাইলটি ওভাররাইড করতে হবে :hover। অন্য কথায়, আপনাকে background-colorসম্পত্তিটি পাল্টাতে হবে । সুতরাং চূড়ান্ত কোড হবে

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

বেহালা

পদ্ধতি 2

:not()অন্যদের দ্বারা বর্ণিত হিসাবে একটি বিকল্প পদ্ধতি ব্যবহার করা হবে । এটি বন্ধনীর অভ্যন্তরে বর্ণিত শ্রেণি বা সম্পত্তি না থাকা কোনও উপাদান ফেরত দেবে। এই ক্ষেত্রে, আপনি .remode_selectedসেখানে রাখা হবে। এটি এমন সমস্ত উপাদানকে লক্ষ্যবস্তু করবে যেগুলির কোনও শ্রেণি নেই.remode_selected

বেহালা

যাইহোক, আমি এই পদ্ধতির সুপারিশ করব না, কারণ এটি CSS3 এ চালু হয়েছিল, তাই ব্রাউজার সমর্থন আদর্শ নয়।

পদ্ধতি 3

তৃতীয় পদ্ধতিটি হ'ল jQuery ব্যবহার করা। আপনি .not()নির্বাচককে লক্ষ্য করতে পারেন , যা সিএসএসে ব্যবহারের অনুরূপ :not(), তবে আরও ভাল ব্রাউজার সমর্থন সহ support

বেহালা

Comments

আপনার "মেথড 3" অপসারণ করা উচিত যা jQuery এর উল্লেখ করে যেহেতু ওপি নির্দিষ্টভাবে সমাধানের জন্য "জাভাস্ক্রিপ্ট নয়" বলেছিল।

— স্কটস