CSS অ্যাট্রিবিউট সিলেক্টর

নির্দিষ্ট এট্রিবিউট ধারণকারী HTML উপাদানের শৈলী সেট করুন

আমরা নির্দিষ্ট এট্রিবিউট বা এট্রিবিউট মানকে ধারণকারী HTML উপাদানের শৈলী সেট করতে পারি

CSS [attribute] সিলেক্টর

[attribute] চিহ্নকারীটি নির্দিষ্ট এট্রিবিউট ধারণকারী উপাদানকে চিহ্নিত করে

নিম্নলিখিত উদাহরণটি টার্গেট এট্রিবিউট ধারণকারী সব <a> উপাদানকে চিহ্নিত করবে;

উদাহরণ

a[target] {
  background-color: yellow;
}

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

CSS [attribute="value"] চিহ্নকারী

[attribute="value"] চিহ্নকারীটি নির্দিষ্ট এট্রিবিউট এবং মান ধারণকারী উপাদানকে চিহ্নিত করে

নিম্নলিখিত উদাহরণটি সব টার্গেট="_blank" এট্রিবিউট ধারণকারী <a> উপাদানকে চিহ্নিত করবে:

উদাহরণ

a[target="_blank"] { 
  background-color: yellow;
}

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

CSS [attribute~="value"] চিহ্নকারী

[attribute~="value"] চিহ্নকারীটি নির্দিষ্ট শব্দ ধারণকারী এট্রিবিউট উপাদানকে চিহ্নিত করে

নিম্নলিখিত উদাহরণটি নিম্নলিখিত এট্রিবিউটের "flower" শব্দ ধারণকারী সব উপাদানকে চিহ্নিত করবে:

উদাহরণ

[title~="flower"] {
  border: 5px solid yellow;
}

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

উপরোক্ত উদাহরণটি নিম্নলিখিত এট্রিবিউটের উপাদানকে মাপবে: title="flower"、title="summer flower" এবং title="flower new"，কিন্তু নিম্নলিখিতকে না: title="my-flower" বা title="flowers"。

CSS [attribute|="value"] চিহ্নকারী

[attribute|="value"] চিহ্নকারীটি নির্দিষ্ট এট্রিবিউটের নির্দিষ্ট মানের উপাদানকে চিহ্নিত করে

এই উদাহরণে, class প্রযুক্তির মাধ্যমে "top" শুরু করা সকল মেম্বারকে নির্বাচিত করা হয়:

মন্তব্য:মান সম্পূর্ণ বা একক শব্দ হতে হবে, যেমন class="top" বা সাথে হাইফেন যুক্ত, যেমন class="top-text"。

উদাহরণ

[class|="top"] {
  background: yellow;
}

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

CSS [attribute^="value"] সিলেক্টর

[attribute^="value"] সিলেক্টর নির্দিষ্ট মূল্যের ভাবে নির্দিষ্ট প্রযুক্তির মাধ্যমে নির্বাচিত মেম্বারকে অনুসন্ধান করে।

এই উদাহরণে, class প্রযুক্তির মাধ্যমে "top" শুরু করা সকল মেম্বারকে নির্বাচিত করা হয়:

টিপস:মূল্য একটি সম্পূর্ণ শব্দ হয় না কেন!

উদাহরণ

[class^="top"] {
  background: yellow;
}

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

CSS [attribute$="value"] সিলেক্টর

[attribute$="value"] সিলেক্টর নির্দিষ্ট মূল্যের সমাপ্তির সাথে নির্দিষ্ট প্রযুক্তির মাধ্যমে নির্বাচিত মেম্বারকে অনুসন্ধান করে।

এই উদাহরণে, class প্রযুক্তির মাধ্যমে "test" শেষ হওয়া সকল মেম্বারকে নির্বাচিত করা হয়:

টিপস:মূল্য একটি সম্পূর্ণ শব্দ হয় না কেন!

উদাহরণ

[class$="test"] {
  background: yellow;
}

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

CSS [attribute*="value"] সিলেক্টর

[attribute*="value"] সিলেক্টর নির্দিষ্ট শব্দটি ধারণকারী প্রযুক্তির মাধ্যমে নির্বাচিত মেম্বারকে অনুসন্ধান করে।

এই উদাহরণে, class প্রযুক্তির মাধ্যমে "te" শব্দ ধারণকারী সকল মেম্বারকে নির্বাচিত করা হয়:

টিপস:মূল্য একটি সম্পূর্ণ শব্দ হয় না কেন!

উদাহরণ

[class*="te"] {
  background: yellow;
}

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

ফর্ম স্টাইলিং সেট

যদি কোনো ক্লাস বা id না থাকা ফর্মকে স্টাইলিং করতে হয়, তবে এটি অত্যন্ত উপযোগী হবে:

উদাহরণ

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

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

টিপস:আমাদের সমীক্ষা করুন CSS ফর্ম টিউটোরিয়ালআরও বেশি জানতে CSS ফর্ম স্টাইলিং নিয়ে শিখুন。

সমস্ত CSS প্রযুক্তি সিলেক্টর

সিলেক্টর উদাহরণ উদাহরণ বর্ণনা
[attribute] [target] প্রত্যেকটি মেম্বারকে যার target প্রযুক্তির মাধ্যমে হয়।
[attribute=value] [target=_blank] প্রত্যেকটি মেম্বারকে যার target="_blank" প্রযুক্তির মাধ্যমে হয়।
[attribute~=value] [title~=flower] প্রত্যেকটি মেম্বারকে যার title প্রযুক্তির মাধ্যমে "flower" শব্দ ধারণ করে।
[attribute|=value] [lang|=en] প্রত্যেকটি মেম্বারকে যার lang প্রযুক্তির মাধ্যমে "en" শুরু করে।
[attribute^=value] a[href^="https"] প্রত্যেকটি <a> মেম্বারকে যার href প্রযুক্তির মাধ্যমে "https" শুরু করে।
[attribute$=value] a[href$=".pdf"] প্রত্যেকটি <a> মেম্বারকে যার href প্রযুক্তির মাধ্যমে ".pdf" শেষ হয়।
[attribute*=value] a[href*="codew3c"] প্রত্যেক <a> ইলিমেন্টকে তার href প্রতিভা এক্সট্রাসেকট "codew3c" অন্তর্ভুক্ত করা হয়

সম্প্রসারিত পড়া

অতিরিক্ত পুস্তকঃCSS অ্যাট্রিবিউট সিলেক্টর বিবরণ