CSS এট্রিবিউট চিহ্নিতকারী বিস্তারিত

CSS 2-এ বৈশিষ্ট্য চিহ্নিতকারী প্রবর্তিত হয়েছে。

এলিমেন্টকে চিহ্নিত করতে, বৈশিষ্ট্য এবং বৈশিষ্ট্যের মান অনুযায়ী বৈশিষ্ট্য চিহ্নিতকারী ব্যবহার করা যেতে পারে。

সরল বৈশিষ্ট্য চিহ্নিতকারী

যদি আপনি কোনও বৈশিষ্ট্য সম্পন্ন এলিমেন্টকে চিহ্নিত করতে চান, যেখানে বৈশিষ্ট্যের মান কোনো কোনো হতে পারে, তাহলে সরল বৈশিষ্ট্য চিহ্নিতকারী ব্যবহার করতে হবে。

উদাহরণ 1

যদি আপনি সব শিরোনাম (title) সম্পন্ন এলিমেন্টকে লাল রঙে করতে চান, তাহলে এভাবে লিখতে হবে:

*[title] {color:red;}

আপনার নিজেই চেষ্টা করুন

উদাহরণ 2

তারই অনুরূপ, শুধুমাত্র href বৈশিষ্ট্য সম্পন্ন এইচ ট্যাগ (a এলিমেন্ট) এ স্টাইল লাগানো যেতে পারে:

a[href] {color:red;}

আপনার নিজেই চেষ্টা করুন

উদাহরণ 3

এখানেও একাধিক বৈশিষ্ট্য অনুযায়ী চিহ্নিত করা যেতে পারে, যেখানে সবজনীয়ভাবে এই বৈশিষ্ট্য চিহ্নিতকারীকে একসঙ্গে যুক্ত করা হয়。

যেমন, যদি আপনি এমন সব এলিমেন্টকে লাল হাইপারলিঙ্ক করতে চান যা হ্রেফ এবং টাইটল অ্যাট্রিবিউটসহ আছে, তাহলে এইভাবে লিখতে হবে:

a[href][title] {color:red;}

আপনার নিজেই চেষ্টা করুন

উদাহরণ 4

এই বৈশিষ্ট্যটি কিছু রচনাত্মক পদ্ধতিতে ব্যবহার করা যেতে পারে。

যেমন, আপনি সব অল্ট অ্যাট্রিবিউটসহ চিত্রকে সাইল করতে পারেন, যাতে এই কার্যকরী চিত্রগুলি উপস্থাপিত হয়:

img[alt] {border: 5px solid red;}

আপনার নিজেই চেষ্টা করুন

সুঝাওয়া:উপরোক্ত বিশেষ ক্ষেত্রটি মূলত নির্ণয়করণের জন্য ব্যবহার করা হয়, নয় ডিজাইনের জন্য, অর্থাৎ চিত্রগুলি কি কার্যকরী হয় তা নির্ণয় করার জন্য。

উদাহরণ 5: XML ডকুমেন্টের জন্য অ্যাট্রিবিউট সিলেক্টর

অ্যাট্রিবিউট সিলেক্টর XML ডকুমেন্টে খুবই ব্যবহারিক, কারণ XML ভাষা অ্যাট্রিবিউট এবং এলিমেন্টের ব্যবহারের জন্য নাম নির্দিষ্ট করতে উৎসাহিত করে。

যদি আপনি সূর্যসিদ্ধান্ত গ্রহগুলির বর্ণনায় একটি XML ডকুমেন্ট ডিজাইন করেছেন, এবং আপনি যেমন মোনস অ্যাট্রিবিউটসহ planet এলিমেন্টকে লাল করতে চান, তাহলে এইভাবে লিখতে হবে:

planet[moons] {color:red;}

এটি নিচের ট্যাগের দ্বিতীয় এবং তৃতীয় এলিমেন্টের টেক্সটকে লাল করবে, কিন্তু প্রথম এলিমেন্টের টেক্সট লাল হবে না:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

প্রভাব দেখুন

অ্যাট্রিবিউট ভূত সিলেক্টর

কোনও অ্যাট্রিবিউটসহ এলিমেন্টকে সিলেক্ট করার পাশাপাশি, আপনি আরও কম সিলেক্ট করতেও পারেন, শুধুমাত্র নির্দিষ্ট অ্যাট্রিবিউট ভূত এলিমেন্টকে সিলেক্ট করতে。

উদাহরণ 1

যেমন, যদি আপনি কোনও নির্দিষ্ট ডকুমেন্টকে ওয়েব সার্ভারের উপর লাল হাইপারলিঙ্ক করতে চান, তাহলে এইভাবে লিখতে হবে:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

আপনার নিজেই চেষ্টা করুন

উদাহরণ 2

সরল অ্যাট্রিবিউট সিলেক্টরের মতো, একটি ডকুমেন্টকে সিলেক্ট করতে একাধিক অ্যাট্রিবিউট-ভূত সিলেক্টরকে জুড়া দিয়ে একটি সিলেক্টর ব্যবহার করা যায়。

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

এটি নিচের ট্যাগের প্রথম হাইপারলিঙ্কের টেক্সটকে লাল করবে, কিন্তু দ্বিতীয় বা তৃতীয় লিঙ্কগুলি প্রভাবিত হবে না:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

আপনার নিজেই চেষ্টা করুন

উদাহরণ 3

একইভাবে, XML ভাষাও এইভাবে সাইট সেট করতে পারে

আমরা এখন পুনরায় প্ল্যানেটের উদাহরণে ফিরে আসি। যদি আপনি মাত্র moons অপারেটরের মানকারী 1-এর প্ল্যানেট এলিমেন্টকে চিহ্নিত করতে চান:

planet[moons="1"] {color: red;}

এই কোডটি নিম্নোক্ত ট্যাগটির দ্বিতীয় এলিমেন্টকে লাল করবে, কিন্তু প্রথম এবং তৃতীয় এলিমেন্টকে প্রভাবিত করবে না:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

প্রভাব দেখুন

অপারেটর এবং অপারেটরের মানকারীকে সম্পূর্ণভাবে ম্যাচ করতে হবে

মনে রাখুন, এই বিন্যাসটি অপারেটরের মানকারীর সাথে সম্পূর্ণভাবে ম্যাচ করতে হবে

যদি অপারেটরের মানকারীতে স্পেস দিয়ে বিভক্ত মানকারী সমূহ থাকে, তবে ম্যাচিংয়ে সমস্যা হতে পারে

একটি নিম্নোক্ত ট্যাগ বিন্যাস বিচার করুন:

<p class="important warning">This paragraph is a very important warning.</p>

যদি এটা p[class="important"] হয়, তবে এই নিয়মটি নিম্নোক্ত ট্যাগটির সাথে ম্যাচ করবে না

যদি আপনি কোনও এলিমেন্টকে কোনও প্রতিষ্ঠান মানকারীর উপর ভিত্তি করে চিহ্নিত করতে চান, তবে এইভাবে লিখতে হবে:

p[class="important warning"] {color: red;}

আপনার নিজেই চেষ্টা করুন

অংশমূলক অপারেটর চিহ্নকারীর উপযোগ

যদি আপনি অপারেটরের অপারেটরের কোনও শব্দ অনুসারে চিহ্নিত করতে চান, তবে ওয়াভ অপারেটর ( ~ ) ব্যবহার করতে হবে

যদি আপনি class অপারেটরের important থাকা এলিমেন্ট চিহ্নিত করতে চান, তবে এই চিহ্নকারীটি ব্যবহার করতে পারেন:

p[class~="important"] {color: red;}

আপনার নিজেই চেষ্টা করুন

যদি ওয়াভ মানকারী না দেওয়া হয়, তবে তা অর্থাৎ সম্পূর্ণ মানকারী সম্পূর্ণ হওয়ার জন্য

অংশমূলক অপারেটর চিহ্নকারী এবং কলম চিহ্নকারীর পার্থক্য

এই চিহ্নকারী আমরা কলম চিহ্নকারীতে আলোচিত করেছি

অর্থাৎ, p.important এবং p[class="important"] HTML ডকুমেন্টে প্রয়োগ করলে সমান

তাহলে, "~=" প্রতিষ্ঠান চিহ্নকারী কেন থাকতে হবে? কারণ তা কোনও অসম্পূর্ণ অপারেটর, শুধুমাত্র class নয়

যেমন, একটি বড় ছবি সমৃদ্ধ ডকুমেন্ট থাকতে পারে, যার মধ্যে কেবলমাত্র কিছুটা ছবি রয়েছে। এর জন্য, একটি title ডকুমেন্টের অংশ সম্পর্কিত প্রতিষ্ঠান চিহ্নকারী ব্যবহার করা যেতে পারে, যার মাধ্যমে এই ছবি চিহ্নিত করা যায়:

img[title~="চিত্র"] {border: 1px solid gray;}

এই নিয়মটি title টেক্সটকে "Figure"-এর সাথে ম্যাচ করবে। title অ্যাট্রিবিউট নেই বা title অ্যাট্রিবিউটে "Figure" নেই এমন ছবিগুলি ম্যাচ করা হবে না।

আপনার নিজেই চেষ্টা করুন

সাবস্ট্রিং ম্যাচিং অ্যাট্রিবিউট সিলেক্টর

এখন আপনাকে একটি আরও উচ্চতর সিলেক্টর মডিউলটি পরিচয় দিতে হবে, যা CSS2-র পরে প্রকাশিত হয়েছে। নিয়মনীতির মতো, এটি "সাবস্ট্রিং ম্যাচিং অ্যাট্রিবিউট সিলেক্টর" নামে ডাকা যেতে পারে。

বহুতো আধুনিক ব্রাউজারগুলি এইসব সিলেক্টরগুলির সমর্থন করে, যেমন IE7-ও。

এইসব সিলেক্টরগুলির একটি সাধারণ সারসংক্ষেপ নিম্নলিখিত রয়েছে:

ধরন বর্ণনা
[abc^="def"] abc অ্যাট্রিবিউটের মান "def"-এর সাথে শুরুক সব ইলেকট্রনমকে বাছাই করা
[abc$="def"] abc অ্যাট্রিবিউটের মান "def"-এর সাথে শেষ হওয়া সব ইলেকট্রনমকে বাছাই করা
[abc*="def"] abc অ্যাট্রিবিউটের মানের মধ্যে "def" সাবস্ট্রিং থাকা সব ইলেকট্রনমকে বাছাই করা

এইসব সিলেক্টরগুলির বেশ কিছু ব্যবহার হতে পারে。

উদাহরণ হিসেবে, কোনো সাইটকে CodeW3C.com-এর লিঙ্ক হিসেবে রেফারেন্স করার জন্য, আপনাকে এসব লিঙ্কগুলিকে class নির্দিষ্ট করতে হবে না এবং সেই class-এর জন্য স্টাইল লিখতে হবে, বরং নিম্নলিখিত নিয়মটি লিখতে হবে:

a[href*="codew3c.com"] {color: red;}

আপনার নিজেই চেষ্টা করুন

সুঝাওয়া:এই সিলেক্টরগুলিকে কোনো অ্যাট্রিবিউটের জন্য ব্যবহার করা যেতে পারে。

বিশেষ অ্যাট্রিবিউট সিলেক্টরের ধরন

শেষপর্যন্ত, বিশেষ অ্যাট্রিবিউট সিলেক্টরটি আপনাকে পরিচয় দিয়েছি। নিম্নলিখিত একটি উদাহরণ দেখুন:

*[lang|="en"] {color: red;}

এই নিয়মটি ল্যাঙ্গ অ্যাট্রিবিউটের মান en বা en- দ্বারা শুরুক সব ইলেকট্রনমকে বাছাই করবে। তাই, নিম্নলিখিত এক্সেম্প্লারের প্রথম তিনটি ইলেকট্রনমকে বাছাই করা হবে, কিন্তু শেষ দুটি ইলেকট্রনমকে বাছাই করা হবে না:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

আপনার নিজেই চেষ্টা করুন

সাধারণত, [att|="val"] কোনো অ্যাট্রিবিউট এবং এটির মানের জন্য ব্যবহার করা যেতে পারে。

একটি HTML ডকুমেন্টের একটি কাটমাটি ছবি থাকলে, যেকোনো ছবির ফাইলনামটি এমনভাবে হতে হবে: figure-1.jpg এবং figure-2.jpg। এরপর নিম্নলিখিত সিলেক্টরটি ব্যবহার করে এইসব ছবিগুলিকে ম্যাচ করা যাবে:

img[src|="figure"] {border: 1px solid gray;}

আপনার নিজেই চেষ্টা করুন

স্বাভাবিক, এই অ্যাট্রিবিউট সিলেক্টরের সবচেয়ে সাধারণ ব্যবহার হল ভাষা মানকের সাথে ম্যাচ করা。

CSS চিহ্নিতকারী পরিচিতি হান্ডবুক

চিহ্নিতকারী বর্ণনা
[attribute] নির্দিষ্ট অ্যাট্রিবিউট নির্দিষ্ট উপাদানকে চিহ্নিত করুন。
[attribute=value] নির্দিষ্ট অ্যাট্রিবিউট ও মান নির্দিষ্ট উপাদানকে চিহ্নিত করুন。
[attribute~=value] নির্দিষ্ট শব্দের মধ্যে থাকা অ্যাট্রিবিউট মানের উপাদানকে চিহ্নিত করুন。
[attribute|=value] নির্দিষ্ট মানের সাথে শুরু করা এবং একটি সমগ্র শব্দ হিসাবে থাকা অ্যাট্রিবিউট মানের উপাদানকে চিহ্নিত করুন。
[attribute^=value] নির্দিষ্ট মানের সাথে ভাবা হওয়ার প্রত্যেক অ্যাট্রিবিউট মানের মান নির্দিষ্ট মানের সাথে মিলে যাওয়ার প্রত্যেক উপাদানকে চিহ্নিত করুন。
[attribute$=value] নির্দিষ্ট মানের সাথে শেষ হওয়ার প্রত্যেক অ্যাট্রিবিউট মানের মান নির্দিষ্ট মানের সাথে মিলে যাওয়ার প্রত্যেক উপাদানকে চিহ্নিত করুন。
[attribute*=value] প্রত্যেক অতিরিক্ত অ্যাট্রিবিউট মানের মান নির্দিষ্ট মানের সাথে মিলে যাওয়ার প্রত্যেক উপাদানকে চিহ্নিত করুন。