সিএসএস কি নির্বাচকের সমান নয়?

Question

সিএসএসে কিছু আছে! = (সমান নয়)? উদাহরণস্বরূপ, আমার কাছে নিম্নলিখিত কোড রয়েছে:

input {
 ... 
 ...
}

তবে কিছু ইনপুটগুলির জন্য আমাকে এটি বাতিল করতে হবে। আমি ইনপুট ট্যাগে "রিসেট" ক্লাস যুক্ত করে এটি করতে চাই eg

<input class="reset" ... />

এবং তারপরে সিএসএস থেকে কেবল এই ট্যাগটি এড়িয়ে যান।

আমি কীভাবে এটি করতে পারি?

আমি দেখতে পাচ্ছি একমাত্র উপায় হ'ল ইনপুট ট্যাগে কিছু শ্রেণি যুক্ত করা, এবং সিএসএসকে নিম্নরূপে পুনর্লিখন:

input.mod {
 ...
 ...
}

Comments

আপনি আপনার প্রশ্নের উত্তর দিয়েছেন, আমি মনে করি। স্টাইলটি ইনপুট.মড করুন এবং পছন্দসই ইনপুট ট্যাগে ক্লাস 'মোড' যুক্ত করুন।

— নাজমুল

Answer 1

সিএসএস 3 এ আপনি :not()ফিল্টারটি ব্যবহার করতে পারেন তবে সমস্ত ব্রাউজার এখনও সিএসএস 3 কে পুরোপুরি সমর্থন করে না, তাই আপনি এখন যা করছেন তা সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত তা নিশ্চিত হয়ে নিন (এবং বেশ কিছু সময়ের জন্য রয়েছেন; এটি একটি পুরানো উত্তর ...)।

উদাহরণ:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

এবং সিএসএস

input:not(.avoidme) { background-color: green; }

---

দ্রষ্টব্য: এই workaround আর প্রয়োজন হবে না; আমি এটি এখানে প্রসঙ্গে রেখে দিচ্ছি।

আপনি CSS3 ব্যবহার করতে না চাইলে আপনি সমস্ত উপাদানগুলিতে স্টাইলটি সেট করতে পারেন এবং তারপরে এটি একটি শ্রেণীর সাথে পুনরায় সেট করতে পারেন।

input { background-color: green; }
input.avoidme { background-color: white; }

Comments

ওএমজি ... আমি জানতাম যে এটির উপস্থিতি :) হ্যাঁ, এটি! ধন্যবাদ।

— অ্যালেক্স আইভ্যাসিভ

সমর্থনটির মূলত আইই 8 (এবং পুরানো প্রকাশগুলি) থেকে অভাব রয়েছে। যদি কেউ পলিফিলের প্রতি আগ্রহী হন: selectivizr.com

— franzlorenzon

@ গুরু: আপনি একাধিক :not()নির্বাচককে শৃঙ্খলাবদ্ধ করতে পারেন : উভয় শ্রেণীর উপাদানগুলিকে এড়িয়ে চলবেন input:not(.avoidme):not(.avoidmetoo), উভয় শ্রেণির উপাদানগুলি এড়াতে পারবেন । input:not(.avoidme.andme)

— টমাস আসচান

@TomasLycken, আসলে, একাধিক নির্বাচকরা ব্যবহার CSS এ একটি চতুর এক, যেমন হয় :not(.this.that) { }মে কাজ, কিন্তু যদি আপনি কিছু যেমন কি হিসাবে :not(.this, .that) { }আপনি নিচে পড়ে করব, আপনি তাদের যেমন ডেজি চেইন করতে হবে: :not(.this):not(.that)। আমি বুঝতে পেরেছি আপনি সম্ভবত এটি জানেন, আমি ভবিষ্যতের পাঠকদের সহায়তা করার চেষ্টা করছি :)

— ও 'স্প্যাম

ভবিষ্যতের পাঠকদের জন্য এখানে একটি মন্তব্য রেখে যাওয়া: @ স্যামসউইফ্টের মন্তব্য এখনও সঠিক, তবে তালিকার জন্য সমর্থন ভবিষ্যতে আসছে (সম্ভবত) । আপাতত, যদিও, কেবলমাত্র একক নির্বাচকই ভিতরে সমর্থিত :not()।

— টমাস আসচান

Answer 2

আপনি কেবল সিএসএসে রিসেট ক্লাসে পরিবর্তনগুলি 'রিভার্ট' করেও এটি করতে পারেন।

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}

Answer 3

CSS3 রয়েছে :not(), তবে এটি এখনও সমস্ত ব্রাউজারে প্রয়োগ করা হয়নি। এটি অবশ্য আই 9 প্ল্যাটফর্ম পূর্বরূপে প্রয়োগ করা হয়েছে।

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

ইতিমধ্যে, আপনাকে পুরানো ধাঁচের পদ্ধতিগুলিতে আটকাতে হবে।

Answer 4

আপনি এর মতো একটি বৈশিষ্ট্যকে লক্ষ্য করেও এটির কাছে যেতে পারেন:

input:not([type=checkbox]){ width:100%; }

এই ক্ষেত্রে সমস্ত ইনপুট যা 'চেকবক্স' টাইপ নয়, এর প্রস্থ 100% হবে।

Answer 5

আকর্ষণীয় JQuery ব্যবহার করে DOM উপাদান নির্বাচন করার জন্য এটি চেষ্টা করেছে এবং এটি কার্যকর! :)

$("input[class!='bad_class']");

এই পৃষ্ঠায় 168 ডিভ রয়েছে যার ক্লাসে 'মন্তব্য-অনুলিপি' নেই

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168

Comments

[attr!="value"]একজন jQuery- শুধুমাত্র নির্বাচক api.jquery.com/attribute-not-equal-selector

— xec

সিএসএসের সাথে এর কী সম্পর্ক?

— ডেভলিন কার্নেট

@ ডিভলিংকারনেট "সিএসএস" নির্বাচকরা জেএস ( প্রায় 2013 ) তে মিশ্রিত হয়েছে যাতে লোকেরা এটি অনুসন্ধান করে।

— নিক টি

Answer 6

ক্লাস = "রিসেট" এর পরিবর্তে আপনি ক্লাস = "বৈধ" থাকার মাধ্যমে যুক্তিটি বিপরীত করতে পারেন আপনি এটি ডিফল্টরূপে যুক্ত করতে পারেন এবং শৈলী পুনরায় সেট করতে ক্লাসটি সরিয়ে ফেলতে পারেন।

সুতরাং আপনার উদাহরণ এবং টমাস থেকে

input.valid {
 ... 
 ...
}

এবং

<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>

Comments

আমি মনে করি একটি ক্লাসে প্রয়োগ করে "পুনরায় সেট" করতে সক্ষম হওয়ার পুরো ধারণাটি ছিল যে ডিফল্ট স্টাইলটি থাকা উচিত নয় এমন উপাদানগুলির সংখ্যা যে পরিমাণের চেয়ে বেশি হওয়া উচিত ছিল, তাই ওপি কোনও শ্রেণি প্রয়োগ করতে চায় নি উপাদানগুলির সংখ্যাগরিষ্ঠতা।

— টমাস আসচান