ক্লাসের জন্য সিএসএসে ওয়াইল্ডকার্ড *

Question

আমার এই ডিভগুলি রয়েছে যা আমি স্টাইল করছি .tocolorতবে আমার অনন্য শনাক্তকারী 1,2,3,4 ইত্যাদিও প্রয়োজন তাই আমি এটিকে অন্য শ্রেণি হিসাবে যুক্ত করছি tocolor-1।

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

মাত্র 1 ক্লাস করার উপায় আছে কি tocolor-*? আমি *এই CSS এর মতো একটি ওয়াইল্ডকার্ড ব্যবহার করার চেষ্টা করেছি , তবে এটি কার্যকর হয়নি।

.tocolor-*{
  background: red;
}

Comments

নির্বাচকদের সম্পর্কে এখানে অফিসিয়াল সিএসএস 3 সাইট রয়েছে: w3.org/TR/css3- সিলেক্টর এবং একটি যোগ্যতার তালিকা: findmebyip.com/litmus

— গারফিল্ডক্লোন

Answer 1

আপনার যা প্রয়োজন তাকে অ্যাট্রিবিউট সিলেক্টর বলা হয়। আপনার এইচটিএমএল কাঠামো ব্যবহার করে একটি উদাহরণ নিম্নরূপ:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

আপনি তার জায়গায় divকোনও উপাদান যুক্ত করতে বা এটি সম্পূর্ণভাবে মুছে ফেলতে পারেন এবং আপনার জায়গায় classনির্দিষ্ট উপাদানটির কোনও বৈশিষ্ট্য যুক্ত করতে পারেন।

[class^="tocolor-"]- "টোকলোর-" দিয়ে শুরু হয়।
[class*=" tocolor-"]- স্পেস অক্ষরের পরে সরাসরি সংঘটিত "টোকলর" থাকে contains

ডেমো: http://jsfiddle.net/K3693/1/

সিএসএস অ্যাট্রিবিউট সিলেক্টর সম্পর্কিত আরও তথ্য, আপনি এখানে এবং এখানে খুঁজে পেতে পারেন । এবং MDN ডক্স থেকে MDN ডক্স s

Comments

দুর্দান্ত তথ্য। কেবলমাত্র সতর্কতা যদি পারফরম্যান্স সমস্যা হয় তবে বেশিরভাগ সিএসএস লেটারগুলি রেগেক্সের অনুরূপ (যেমন '*' ব্যবহার করে) বি / সি ধীর পারফরম্যান্সের অনুরূপ বৈশিষ্ট্য নির্বাচনকারীদের প্রত্যাখ্যান করবে। প্রিপ্রোসেসর (উদাঃ স্যাস) ব্যবহার ব্যতীত, এটি করার কোনও অন্য কোনও সম্ভাব্য উপায় আছে কি?

— কোডফিনিটি

শ্রেণীর বৈশিষ্ট্যে একাধিক সাবস্ট্রিং রয়েছে কিনা তা পরীক্ষা করার কোনও উপায় আছে? এরকম কিছু হতে পারে div[class*="foo"][class="bar"]?

— কনার

আমাদের "অন্তর্ভুক্ত" উদাহরণের সেই স্থানটি হ'ল সুন্দর হত্যাকারী। আমি যা দেখতে পাচ্ছি তা থেকে এটি হওয়া উচিত নয়, সঠিক?

— থমাস

class="foo tocolor-red"class="foo fromtocolor-red-blue"

— @ থমাস

এর জন্য ধন্যবাদ. আমি কয়েক বছর ধরে এই কৌশলটি ব্যবহার করে আসছি, কিন্তু কখনই বুঝতে পারি নি যে শ্রেণি ^ = কেবল এইচটিএমএল শ্রেণির প্রবেশের শুরুতে প্রযোজ্য। আমি ভেবেছিলাম এটি এইচটিএমএল ট্যাগের জন্য সংজ্ঞায়িত সমস্ত শ্রেণীর নামের ক্ষেত্রে প্রয়োগ হয়েছে।

— বেভান্সডিজাইন

Answer 2

হ্যাঁ আপনি এটি করতে পারেন।

*[id^='term-']{
    [css here]
}

এটি শুরু করে এমন সমস্ত আইডিকে নির্বাচন করবে 'term-'।

এটি না করার কারণ হিসাবে, আমি দেখছি যেখানে এই উপায়টি বেছে নেওয়া ভাল; শৈলী হিসাবে, আমি এটি নিজেই করব না, তবে এটি সম্ভব।

Comments

এই IDভিত্তিক সংযোজনের জন্য আপনাকে ধন্যবাদ , কেবলমাত্র এটির জন্য নয় class।

— খোম নাজিদ

Answer 3

একটি বিকল্প সমাধান:

div[class|='tocolor'] "টোকলর-" দিয়ে শুরু হওয়া "শ্রেণি" বৈশিষ্ট্যের মানগুলির সাথে মিলবে, "টোকলর -1", "টোকলোর -2" ইত্যাদি সহ

সাবধান যে এটি মেলে না

<div class="foo tocolor-">

তথ্যসূত্র: https://www.w3.org/TR/css3-selectors/#attribute- বিবরণ

[att|=val]

এট অ্যাট্রিবিউটের সাথে একটি উপাদানকে প্রতিনিধিত্ব করে, এর মান হয় "ভ্যাল" হয়ে যায় বা "ভল" দিয়ে তত্ক্ষণাত "-" অনুসরণ করা হয় (ইউ + 002 ডি)

Comments

classবৈশিষ্ট্যটি অন্য কোনও শ্রেণীর সাথে শুরু হয় যা শুরু হয় না এটি কাজ করবে না tocolor।

— বোল্টক্লক

এটি কিউটির উইজেট স্টাইলশিটগুলিতেও সুন্দরভাবে কাজ করে। উদাহরণস্বরূপ, নামযুক্ত সমস্ত লেবেলে একটি স্টাইল প্রয়োগ করতে foo*, আপনি চাইবেনQLabel[objectName|='foo'] { ... }

— মনিকা পুনরায়

@ বোল্টক্লক যেমন বলেছে, উপাদানটির একাধিক ক্লাস রয়েছে এবং তারা ওপি খুঁজছেন ক্লাস দিয়ে শুরু না করলে এই সমাধানটি ভেঙে যায়।

— ড্যান ড্যাসক্লেস্কু

যদিও ক্রোম 78, * এবং work তে কাজ করে না।

— গর্ডন মোহরিন

Answer 4

ডিভগুলি আরও স্টাইল করার জন্য আপনার যদি অনন্য শনাক্তকারকের প্রয়োজন না হয় এবং এইচটিএমএল 5 ব্যবহার করছেন তবে আপনি কাস্টম ডেটা অ্যাট্রিবিউট দিয়ে চেষ্টা করতে পারেন। এখানে পড়ুন বা এর জন্য গুগল অনুসন্ধানের চেষ্টা করুনHTML5 Custom Data Attributes