শ্রেণি উপসর্গ দ্বারা সিএসএস নির্বাচক আছে?

175

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

উদাহরণস্বরূপ, আমি এমন একটি নিয়ম চাই যা ডিভের সাথে প্রযোজ্য যাতে ক্লাস শুরু হয় status-(ক এবং সি, তবে নিম্নলিখিত স্নিপেটে বি নয়):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

কিছু ধরণের সংমিশ্রণ:
div[class|=status]এবংdiv[class~=status-]

এটি কি সিএসএস ২.১ এর আওতায় কার্যকর? এটি কি কোনও সিএসএস অনুমানের অধীনে কার্যকর?

দ্রষ্টব্য: আমি জানি যে অনুকরণ করতে আমি jQuery ব্যবহার করতে পারি।

css css-selectors

— THX-1138
সূত্র

373

এটা তোলে CSS2.1 সঙ্গে করা সম্ভব নয়, কিন্তু এটা সিএসএস 3 অ্যাট্রিবিউট সাবস্ট্রিং-ম্যাচিং নির্বাচকরা (যা সম্ভব হয় IE7 + + সমর্থিত):

div[class^="status-"], div[class*=" status-"]

দ্বিতীয় অ্যাট্রিবিউট সিলেক্টারে স্পেস ক্যারেক্টারটি লক্ষ্য করুন। এটি এমন divউপাদানগুলিকে বেছে নিয়েছে যার classবৈশিষ্ট্য এই শর্তগুলির মধ্যে দুটির সাথে মিলিত:

[class^="status-"] - "স্ট্যাটাস-" দিয়ে শুরু হয়
[class*=" status-"]- একটি স্পেস অক্ষরের পরে সরাসরি সংঘবদ্ধ "স্ট্যাটাস-" অন্তর্ভুক্ত করে। শ্রেণীর নামগুলি এইচটিএমএল অনুমান অনুযায়ী হোয়াইটস্পেস দ্বারা পৃথক করা হয় , তাই উল্লেখযোগ্য স্থানের অক্ষর। প্রথম একাধিক শ্রেণীর নির্ধারিত না হলে হবার পরে এই চেক অন্য কোন শ্রেণীর এবং অ্যাট্রিবিউট মান ক্ষেত্রে প্রথম শ্রেণীর পরীক্ষণ একটি বোনাস যোগ স্থান-প্যাডেড (যা এমন কিছু অ্যাপ্লিকেশান আউটপুট ঘটতে পারে classপরিবর্তনশীল বৈশিষ্ট্যাবলী)।

স্বাভাবিকভাবেই, এটি jQuery তেও কাজ করে, যেমন এখানে প্রদর্শিত হয়েছে ।

উপরে বর্ণিত হিসাবে আপনাকে দুটি অ্যাট্রিবিউট সিলেক্টর একত্রিত করার কারণ হ'ল একটি বৈশিষ্ট্য নির্বাচক যেমন [class*="status-"]নীচের উপাদানটির সাথে মেলে যা অবাঞ্ছিত হতে পারে:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

আপনি যদি নিশ্চিত করতে পারেন যে এরকম দৃশ্য কখনই ঘটবে না , তবে সরলতার জন্য আপনি এই জাতীয় নির্বাচক ব্যবহার করতে পারেন are তবে উপরের সংমিশ্রণটি আরও বেশি দৃ more়।

যদি আপনি এইচটিএমএল উত্স বা মার্কআপ উত্পন্ন অ্যাপ্লিকেশনটির উপর নিয়ন্ত্রণ রাখেন, তবে গম্বোর পরামর্শ অনুসারে কেবল status-উপসর্গটিকে নিজের statusশ্রেণি তৈরি করা সহজ হতে পারে ।

— বোল্টক্লক
সূত্র

1

যদি কোনও অদ্ভুত কারণে আপনার ক্লাস ডাকা হয় status-এবং আপনি এটি মেলে না চান তবে নির্বাচক আরও জটিল হয়ে উঠবে: div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)প্লাস আপনি আই 7 / আইই 8 সমর্থন হারাবেন। ধন্যবাদ, আপনার মার্কআপটি যদি বুদ্ধিমান হয় তবে আপনার এমন শ্রেণিটি বাদ দেওয়ার দরকার নেই।

— BoltClock

এই ভুল কি: [class*=" anim-overlay-"] a:hover:after{...}। আমার সিএসএসের ক্লাসগুলি হ'ল anim-overlay-1, anim-overlay-2.....anim-overlay-8

— এমবি পারভেজ রনি

2

@ ওয়েবড্যাভরন: আপনি the = অংশটি ভুলে গেছেন। যদি আপনার শ্রেণীর বৈশিষ্ট্যটি এনিম-ওভারলে দিয়ে শুরু করার গ্যারান্টিযুক্ত থাকে- তবে আপনার সম্ভবত * = অংশের প্রয়োজন হবে না।

— BoltClock

ধন্যবাদ. আরেকটি জিনিস, আমি কি এটি ব্যবহার করতে পারি .anim-overlay-*{...}?

— এমবি পারভেজ রনি

2

@ ড্যানিয়েল কমপটন: সম্পাদনার জন্য ধন্যবাদ। আমি যেমন গোপনীয়ভাবে সচেতন হয়েছি যে এরকম শব্দগুলি কারও কাছে অনুভূতিযুক্ত হতে পারে যার জন্য কিছু এতটা স্পষ্ট নাও হতে পারে। আমি জানি কিছু লোক সত্যিই এই ধরণের পরিবর্তনের প্রশংসা করে না, তাই আমি আপনাকে জানাতে যে বেশিরভাগ ক্ষেত্রে আমি সাড়া দিচ্ছি।

— বোল্টক্লক

14

সিএসএস অ্যাট্রিবিউট নির্বাচনকারীরা আপনাকে স্ট্রিংয়ের জন্য বৈশিষ্ট্যগুলি পরীক্ষা করতে দেয় check (এক্ষেত্রে - একটি শ্রেণির নাম)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(দেখে মনে হচ্ছে এটি 2.1 এবং 3 এর জন্য 'সুপারিশ' স্ট্যাটাসে রয়েছে)

এখানে আমি * কীভাবে এটি কাজ করে মনে হয় তার একটি রূপরেখা রয়েছে:

[ ]: জটিল নির্বাচকদের জন্য ধারক হ'ল আপনি যদি ...
class: 'শ্রেণি' হ'ল এই ক্ষেত্রে আপনি যে বৈশিষ্ট্যটি দেখছেন।
* : সংশোধক (যদি থাকে): এক্ষেত্রে - "ওয়াইল্ডকার্ড" ইঙ্গিত দেয় আপনি কোনও ম্যাচ খুঁজছেন।
test- : গুণকের মান (এক আছে বলে ধরে নিচ্ছি) - এতে "টেস্ট-" স্ট্রিং রয়েছে (যা কিছু হতে পারে)

সুতরাং, উদাহরণস্বরূপ:

[class*='test-'] {
  color: red;
}

উপাদানটির সাথে আপনার যদি যুক্তিসঙ্গত কারণ থাকে তবে আপনি আরও নির্দিষ্ট হতে পারেন

ul[class*='test-'] > li { ... }

আমি প্রান্তের কেসগুলি সন্ধান করার চেষ্টা করেছি, তবে আমি দেখতে পাচ্ছি যে এর সংমিশ্রণটি ব্যবহার করার দরকার নেই - ^এবং *যেমন * সবকিছু পাওয়া যায় ...

উদাহরণ: http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

আই 6 এর উপরে থাকা সমস্ত কিছুই আনন্দের সাথে মেনে চলবে। :)

মনে রাখবেন যে:

[class] { ... }

একটি শ্রেণীর সাথে যে কোনও কিছু নির্বাচন করবে ...

— sheriffderek
সূত্র

[class*='test-']যেমন উপাদান মেলে <div class='foo-test-bar'>। এটিই এক প্রান্তের ক্ষেত্রে আমার উত্তরে বর্ণিত ^ এবং * সংযুক্ত করার প্রয়োজন। এবং আই 6 বৈশিষ্ট্য নির্বাচনকারীদের সমর্থন করে না।

— BoltClock

@ বল্টক্লক - স্পষ্ট করার জন্য ধন্যবাদ! - আমি <EI9 সমর্থন করি না - এবং আমি কখনই কোনও ক্লাস লিখতে পারি না যা একে অপরের দিকে এগিয়ে যায় - সুতরাং আমার জন্য এটি কাজ করে। :)

— শেরিফডেরেক

6

সিএসএস নির্বাচকদের দ্বারা এটি সম্ভব নয়। কিন্তু আপনি এক পরিবর্তে দুটি ক্লাস, যেমন ব্যবহার করতে পারে অবস্থা এবং গুরুত্বপূর্ণ পরিবর্তে অবস্থা গুরুত্বপূর্ণ ।

— গাম্বো
সূত্র

14

নিজস্ব বর্গ সেটিকে পৃথক সম্পর্কে ভাল আইডিয়া, কিন্তু এটা হয় CSS সিলেক্টর সম্ভব। আমার উত্তর দেখুন।

— BoltClock

2

আপনি এই না করতে পারবেন না। এখানে একটি বৈশিষ্ট্য নির্বাচক রয়েছে যা একটি চিহ্ন - পর্যন্ত অবধি সঠিক বা আংশিক মেলে তবে এটি এখানে কাজ করবে না কারণ আপনার একাধিক বৈশিষ্ট্য রয়েছে। আপনি যে শ্রেণীর নামটির সন্ধান করছেন তা যদি সর্বদা প্রথম হয় তবে আপনি এটি করতে পারেন:

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

নোট করুন যে এটি কেবল সিএসএসের বৈশিষ্ট্য নির্বাচনকারীকে সবচেয়ে নিকটতম হিসাবে চিহ্নিত করার জন্য, শ্রেণি নামগুলি সর্বদা সামনে থাকবে বলে ধরে নেওয়া যায় না যেহেতু জাভাস্ক্রিপ্টটি বৈশিষ্ট্যটি পরিচালনা করতে পারে।

— SBUJOLD
সূত্র

2

হ্যাঁ, ভেবেছিলাম JQuery ছবিতে উঠলে এটি একটি সমস্যা হয়ে উঠতে পারে, যেহেতু এটি সামনের দিকে কোনও শ্রেণি classোকাতে পারে।

— THX-1138

হ্যাঁ আমি আমার পোস্টটি সম্পাদনা করব এটি পরিষ্কার করার জন্য এটি স্পষ্ট করে দেওয়ার এটি কোনও প্রস্তাবিত উপায় নয়। শ্রেণীর নামগুলির উপর যদি আপনার নিয়ন্ত্রণ থাকে তবে গাম্বোর পরামর্শ অবশ্যই যাওয়ার উপায় হবে (পুরানো আই ব্রাউজারগুলিতে গুণাবলী নির্বাচনকারী সমর্থিত নয়)।

— এসবিউজোল্ড