সিএসএসে ডেটা অ্যাট্রিবিউট দ্বারা উপাদান নির্বাচন করুন

Question

CSS এ উপাদানগুলি তাদের এইচটিএমএল 5 ডেটা অ্যাট্রিবিউট (উদাহরণস্বরূপ data-role) দ্বারা নির্বাচন করা কি সম্ভব ?

Answer 1

আপনি যদি কোনও গুণাবলী নির্বাচনকারী ব্যবহার করে বোঝাতে চান তবে অবশ্যই, কেন নয়:

[data-role="page"] {
    /* Styles */
}

আপনি বিভিন্ন দর্শনার্থীর জন্য বিভিন্ন বৈশিষ্ট্য নির্বাচনকারী ব্যবহার করতে পারেন যা আমি ডকুমেন্টটিতে লিঙ্ক করেছি all নোট করুন, কাস্টম ডেটা অ্যাট্রিবিউটগুলি "নতুন এইচটিএমএল 5 বৈশিষ্ট্য" হওয়া সত্ত্বেও,

• ব্রাউজারগুলির সাধারণত অ-মানক বৈশিষ্ট্যগুলিকে সমর্থন করার কোনও সমস্যা হয় না, সুতরাং আপনার এটিকে অ্যাট্রিবিউট নির্বাচনকারীদের সাথে ফিল্টার করতে সক্ষম হওয়া উচিত; এবং

• আপনাকে সিএসএসের বৈধতা সম্পর্কেও চিন্তা করতে হবে না, কারণ সিএসএস যতক্ষণ না নির্বাচক সিনট্যাক্সটি ভঙ্গ করে না ততক্ষণ নন-नेमস্পিড অ্যাট্রিবিউট নামগুলির বিষয়ে চিন্তা করে না।

Comments

সমস্ত ন্যাভিগেটরের সাথে সামঞ্জস্যপূর্ণ?

— ক্রিস্টোফ ডেভো

@ ক্রিস্টোফ ডেভোভ: আই 7 + এবং আরও কিছু।

— বোল্টক্লক

ডেটা অ্যাট্রিবিউট সেট করা থাকলে, বা জেএসের মাধ্যমে পরিবর্তিত হলে সিএসএস এটি সনাক্ত করতে পারে বলে মনে হয় না।

— 45 ʙᴀᴋᴇʀ

আরও তদন্তের পরে এটি প্রদর্শিত হবে $("#element").data("field","value");ডেটা অ্যাট্রিবিউটের মান পরিবর্তন করে না এটি কেবল ডম-এর জিকুয়েরির ক্যাশেড সংস্করণটি সংশোধন করে। অর্ডার প্রকৃত করে DOM বৈশিষ্ট্য ব্যবহার করার জন্য এক চাহিদা পরিবর্তন করার জন্য $("#element").attr("data-field","value");। আমার মূল মন্তব্যটি অবৈধ করা হচ্ছে।

— 31 ʙᴀᴋᴇʀ

হ্যাঁ, ডেটাসেটটি পরিবর্তন করার মতো কাজ হ'ল @ ম্যাথিউ - jsfiddle.net/BoltClock/k378xgj3 jQuery কিছুই না বলে ধন্যবাদ।

— BoltClock

Answer 2

আধুনিক ব্রাউজারগুলিতে এগুলি নির্বিশেষে বৈশিষ্ট্যগুলি নির্বাচন করাও সম্ভব

সঙ্গে:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

উদাহরণস্বরূপ: http://codepen.io/jasonm23/pen/fADnu

ব্রাউজারগুলির একটি উল্লেখযোগ্য শতাংশে কাজ করে।

নোট করুন এটি কোনও জ্যাকুয়ারি নির্বাচক বা ব্যবহার করেও ব্যবহার করা যেতে পারে document.querySelector

Comments

বাহ, আমি কখনও দেখিনি যে এটি ব্যবহার করা যেতে পারে !! +1 টি! এবং এফডব্লিউআইডাব্লু, এখন যে ব্রাউজার শটগুলি শেষ হয়ে গেছে, আমি বিশ্বাস করি এটি আই 7+ এ কাজ করে + সুতরাং এর সমর্থনটি বেশ সর্বব্যাপী। এটা মজার ব্যাপার যে এমনকি ক্রিস কোয়েরও এখানে

— ক্যামিলো মার্টিন

ধন্যবাদ @ ক্যামিলোমার্টিন আমি বিভ্রান্তি / বিরক্তি এড়াতে ব্রাউজারগুলির লিঙ্কটি সরিয়েছি।

— ocodo

ক্রিস কোয়ারের থ্রেডে একটি লিঙ্ক যুক্ত করা হয়েছে CSS-tricks.com/attribute-selectors/#comment-965838 @ ক্যামিলোমার্টিন

— ocodo

এই বাক্য গঠনগুলির কোনওটিই যাইহোক নতুন নয় - বেশি লোক অবাক হয়েছিল যে আই 6+ আই 7 + এর চেয়ে বেশি সমর্থন করে না। আপনি বেশ কয়েকটি ধারণা নিতে পারেন যে সমস্ত CSS2.1 নির্বাচকগুলি IE8 এবং পরবর্তীকালে সমর্থিত রয়েছে - আইই 7 বেশিরভাগ ক্ষেত্রেই কিছু অস্পষ্ট বাগ রয়েছে with সমস্ত আধুনিক ব্রাউজারগুলি কিছু সময়ের জন্য 3 স্তরের নির্বাচককে সমর্থন করেছে, এর পরিবর্তে ক্রোম বাগি এক।

— BoltClock

যেহেতু আমরা অ্যাট্রিবিউট নির্বাচকরা যদিও বিষয় আছি, এটা যে সাবস্ট্রিং অ্যাট্রিবিউট নির্বাচকরা যে 3 স্তর ব্যবস্থা চালু হয়েছে (নোট আকর্ষণীয় এর ^=, *=এবং $=) ও IE7 এবং IE8 দ্বারা সমর্থিত। মানক হওয়ার আগে তাদের আইইতে পরিচয় করানো হতে পারে।

— BoltClock

Answer 3

সিএসএস 3 স্ট্রিং বৈশিষ্ট্য নির্বাচনকারীদের লক্ষ্য করার মতো এটি

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

Answer 4

আপনি একাধিক নির্বাচককে একত্রিত করতে পারেন এবং এটি এত ভাল করে জেনে যে আপনি প্রতিটি বৈশিষ্ট্য এবং বৈশিষ্ট্যগুলি hrefকেবলমাত্র সিএসএসের সাথে তাদের মানগুলির উপর ভিত্তি করে তাদের মানের উপর ভিত্তি করে নির্বাচন করতে পারেন ..

বৈশিষ্ট্য নির্বাচনকারীরা আপনাকে আরও কিছু অতিরিক্ত idএবং classগুণাবলী সহ খেলতে দেয়

এখানে অ্যাট্রিবিউট সিলেক্টরগুলিতে দুর্দান্ত একটি পঠন

বেহালা

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

ব্রাউজার সমর্থন:
আই 6 +, ক্রোম, ফায়ারফক্স এবং সাফারি

আপনি এখানে বিশদ পরীক্ষা করতে পারেন ।

Answer 5

    [data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}