সিএসএস নির্বাচক "(এ বা বি) এবং সি"?

176

এটি সহজ হওয়া উচিত তবে এর জন্য অনুসন্ধানের শব্দগুলি খুঁজে পেতে আমার সমস্যা হচ্ছে।
ধরা যাক আমার কাছে এটি রয়েছে:

<div class="a c">Foo</div>
<div class="b c">Bar</div>

সিএসএসে, আমি কীভাবে এমন একটি নির্বাচক তৈরি করতে পারি যা "(.a বা .b) এবং .c" এর সাথে মেলে এমন কোনও কিছুর সাথে মেলে?

আমি জানি আমি এটি করতে পারি:

.a.c,.b.c {
  /* CSS stuff */
}

তবে, ধরে নিচ্ছি যে আমি বিভিন্ন ধরণের যৌক্তিক সংমিশ্রণের সাথে এই ধরণের যুক্তিটি অনেক করতে চাইছি, এর চেয়ে আরও ভাল বাক্য গঠন আছে কি?

html css css-selectors

— তামাশা
সূত্র

আপনার যদি ইন্টারনেট এক্সপ্লোরার 6 সমর্থন করতে হয় তবে সাবধান হন, কারণ এটি কোনও সিএসএস নির্বাচকের একাধিক শ্রেণীর নাম উপেক্ষা করবে।

— আগামী

24

ভাগ্যক্রমে, এই প্রকল্পের জন্য, আমি আই 6 ব্যবহারকারীদের তাদের আপগ্রেড করতে বলতে পারি।

— জোশ

12

স্পষ্টতার স্বার্থে আমি সর্বদা কমাগুলির পরে একটি নতুন লাইন বা খুব কম সময়ে কোনও স্থান রাখার চেষ্টা করি।

— এভিনিস

2

নতুন লাইনের জন্য #Neves +1 এটি আমার মতে সেরা পরামর্শ, বিশেষত উত্স নিয়ন্ত্রণ ব্যবহার করার সময়।

— কর্ট করুন

149

আরও ভাল বাক্য গঠন আছে?

না। সিএসএসের orঅপারেটর ( ,) গ্রুপিংয়ের অনুমতি দেয় না। এটি মূলত নির্বাচকদের মধ্যে সর্বনিম্ন-অগ্রাধিকারের লজিকাল অপারেটর, সুতরাং আপনাকে অবশ্যই ব্যবহার করতে হবে .a.c,.b.c।

— ম্যাট বল
সূত্র

25

এখনও নয়, তবে পরীক্ষামূলক :matches()ছদ্ম-শ্রেণির ফাংশন রয়েছে যা কেবল এটি করে:

:matches(.a .b) .c {
  /* stuff goes here */
}

আপনি এখানে এবং এখানে আরও তথ্য পেতে পারেন । বর্তমানে, বেশিরভাগ ব্রাউজারগুলি তার প্রাথমিক সংস্করণটিকে সমর্থন করে :any(), যা একইভাবে কাজ করে তবে প্রতিস্থাপন করা হবে :matches()। এটি সর্বত্র ব্যবহার করার আগে আমাদের আরও কিছুটা অপেক্ষা করতে হবে (আমি অবশ্যই করব)।

— Metalcoder
সূত্র

তারা এমন কিছু বাস্তবায়ন না করায় IE কে দোষ দেওয়া অযৌক্তিক যে তারা কেবল কখনও ভাবেননি এবং শুরু করার কোনও খসড়ায় নেই। :-moz-any()এবং :-webkit-any()মোজিলা এটি নির্বাচক 4 এর জন্য প্রস্তাব দেওয়ার অনেক আগে দেখিয়েছিল (এটি তার বর্তমান অবতার দিকে নিয়ে যায় :matches())।

— BoltClock

1

খসড়াটি কতক্ষণ উপলব্ধ করা হয়েছে তা বিবেচনা না করেই কোনও বিক্রেতার অস্থির খসড়া থেকে কোনও বৈশিষ্ট্য বাস্তবায়নের আশা করা সমান অযৌক্তিক ( ।

— BoltClock

@ বল্টক্লক, তারা 2001 এর পুরোপুরি অস্তিত্বের জন্য পুরো দশক ধরে আই 6 কে দোষ দিচ্ছিল People মানুষ কেবল কাউকে দোষ দিতে চায়।

— গিগফ্রি

পরীক্ষামূলকগুলিতে একটি শব্দ হ'ল এটি আনুষ্ঠানিকভাবে প্রয়োগ না করা হলে আপনি তাদের উপর নির্ভর শুরু করতে চান না। যদিও এটি দুর্দান্ত সমাধান হিসাবে মনে হতে পারে - এটির অদৃশ্য হওয়ার সম্ভাবনা যা ব্যক্তিগতভাবে আমাকে আমার প্রকল্পগুলিতে এটি প্রয়োগ করতে বাধা দেয়। এমনকি একটি পরীক্ষামূলক সিউডো ক্লাসের খোঁজ রাখাও আমাকে নিরাপদ বোধ করে না। সম্ভবত এটি প্রকল্পের একাধিক স্থানে এবং ক্ষেত্রে ব্যবহৃত হতে চলেছে এবং আপনি যেখানে এটি ব্যবহার করছেন সেখানে যদি আপনার একাধিক জায়গা থাকে - আপনার কোনওরকমে এটির সমস্ত তথ্য রাখা উচিত। আপনার অবশ্যই

— ফলব্যাকস

আমি কি একমাত্র Uncaught DOMException: Failed to execute 'querySelector' on 'Document': ':any(.a .b)' is not a valid selector.ত্রুটি পাচ্ছি ? 🤔

— থমাস

12

আপনার যদি এটি থাকে:

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

এবং আপনি কেবল সেই উপাদানগুলি নির্বাচন করতে চান যা রয়েছে .xএবং ( .aবা .b), আপনি লিখতে পারেন:

.x:not(.c) { ... }

তবে এটি তখনই সুবিধাজনক যখন আপনার তিনটি "সাব-ক্লাস" থাকে এবং আপনি তাদের মধ্যে দুটি নির্বাচন করতে চান।

শুধুমাত্র একটি উপ-শ্রেণি নির্বাচন করা হচ্ছে (উদাহরণস্বরূপ .a):.a.x

দুটি উপ-শ্রেণী নির্বাচন করা (উদাহরণস্বরূপ .aএবং .b):.x:not(.c)

তিনটি উপ-শ্রেণি নির্বাচন করা: .x

— Vidime বিদ্যা
সূত্র

6

ফর্মের যেকোন যৌক্তিক ধারাটি 'বা' আসলে a or b or c or dএকইভাবে not(not(a) and not(b) and not(c) and not(d))একটি সুবিধাজনক ফাংশন। তত্ত্বগতভাবে এটি সব ক্ষেত্রে এটি ছাড়া সম্ভব হওয়া উচিত । ওপির ক্ষেত্রে (.a or .b) and .c->:not(:not(.a):not(.b)).c

— ম্যাক্স মারফি

2

@ ম্যাক্সমারফি আপনি কি এটি পরীক্ষা করেছেন?

— Vidime বিদাস

4

আজ সকাল পাঁচটা নাগাদ, হ্যাঁ! আমার কাছে জেএস রয়েছে যা পাতায় নির্বাচকদের সাথে প্রথম অর্ডার যুক্তি ছড়িয়ে দেয়, ফলাফল দেয় :not(:not([data-status="ACT"]):not([data-status="ISS"]):not([data-status="COR"]))[data-month="08"]। কোডটি জনসাধারণের পক্ষে উপলব্ধি করার জন্য যথেষ্ট পরিষ্কার নয়, তবে অন্যথায় আমি এটি পোস্ট করেছিলাম। আমি ক্রোম, সাফারি এবং একটি নিম্ন প্রান্তের অ্যান্ড্রয়েড ফোনে পরীক্ষা করেছি।

— ম্যাক্স মারফি

2

@ ম্যাক্সমার্ফি আপনার কাছে একটি দুর্দান্ত বক্তব্য রয়েছে তবে আমি মনে করি আপনি "সুবিধামতনের কাজ" এর পরিবর্তে নির্যাতনের সংজ্ঞাটি দিয়েছেন। ডিজিটাল কম্পিউটার যা কিছু করতে পারে তা ন্যানড গেটে বিভক্ত করা যেতে পারে তবে আমি সফটওয়্যার ইঞ্জিনিয়ারিংয়ের বাকী অংশটিকে "সুবিধামতনের একগুচ্ছ" বলব না। ডিগ্রিগুলির পার্থক্যগুলি দ্রুত ধরনের প্রকৃতির পার্থক্য হয়ে যায় যখন কনস্ট্রাক্টগুলি একত্রিত করা যায়।

— সারা জি

1

@ ম্যাক্সমার্ফি আমি বুঝতে পারছি যে আপনি কেবল রসিকতা করছেন। :( অস্বীকৃতি সিএসএস সিউডো-বর্গ,: না (x), একটি কার্মিক একটি গ্রহণ স্বরলিপি সহজ নির্বাচক একটি আর্গুমেন্ট হিসাবে এক্স এটা একটি উপাদান যে যুক্তি দ্বারা প্রতিনিধিত্ব করা হয় না মিলে যায় এক্স।। অন্য অস্বীকৃতি নির্বাচক থাকতে পারবে না । থেকে ( মজিলা ডক্স , জোর আমার)

— t 20rzsmókus

5

নং স্ট্যান্ডার্ড সিএসএস আপনি যে ধরণের জিনিস খুঁজছেন তা সরবরাহ করে না।

তবে, আপনি কম এবং SASS সন্ধান করতে চাইতে পারেন ।

এগুলি দুটি প্রকল্প যা ভেরিয়েবল, নেস্টেড বিধি এবং অন্যান্য বর্ধিতকরণ সহ অতিরিক্ত বৈশিষ্ট্যগুলি প্রবর্তন করে ডিফল্ট সিএসএস সিনট্যাক্স প্রসারিত করার লক্ষ্য।

তারা আপনাকে অনেক বেশি কাঠামোগত সিএসএস কোড লেখার অনুমতি দেয় এবং এগুলির মধ্যে কোনও একটিই অবশ্যই আপনার নির্দিষ্ট ব্যবহারের ক্ষেত্রে সমাধান করবে।

অবশ্যই, ব্রাউজারগুলির কোনওটিই তাদের বর্ধিত বাক্য গঠন সমর্থন করে না (বিশেষত যেহেতু দুটি প্রকল্পের প্রতিটি পৃথক বাক্য গঠন এবং বৈশিষ্ট্য রয়েছে) তবে তারা যা করেন তা একটি "সংকলক" সরবরাহ করে যা আপনার কম বা SASS কোডকে স্ট্যান্ডার্ড সিএসএসে রূপান্তর করে, যা আপনি তখন করতে পারেন আপনার সাইটে স্থাপন।

— Spudley
সূত্র

এই মুহুর্তে, আমি কেবল পিএইচপি মুদ্রণ ব্যবহার করতে পারি "বিষয়বস্তুর ধরণ: পাঠ্য / CSS"

— জোশ