X

X

X

CSS Selectors Attribute । সিলেক্টর এট্রিবিউট


বিভিন্ন HTML Element কে সিলেক্টরের মাধ্যমে স্টাইল করার পদ্ধতি

It is possible to style HTML elements that have specific attributes or attribute values.
যেসব HTML Element এর বিভিন্ন এট্রিবিউট রয়েছে তাদেরকে তাদের attribute এর মাধ্যমে স্টাইল করা যায়।


CSS [attribute] Selector

[attribute] selector এর মাধ্যমে কোনো ইলামেন্ট সিলেক্ট করা হয়। অর্থাৎ, [] এর মধ্যে attribute এর নাম লিখে বিভিন্ন ইলামেন্ট সিলেক্ট করতে হয়।

নিচের উদাহরণে একটি নির্দিষ্ট এট্রিবিউট দিয়ে সব <a> ইলামেন্টকে সিলেক্ট করা হয়:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS [attribute=”value”] Selector

[attribute="value"] selector দিয়ে কোনো ইলামেন্টের value এর মান দিয়ে উক্ত ইলামেন্টকে সিলেক্ট করা হয়:

নিচের উদাহরণে সব <a> element সিলেক্ট করা হয়েছে যাদের target=”_blank” attribute রয়েছে:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS [attribute~=”value”] Selector

[attribute~="value"] selector দিয়ে সেইসব ইলামেন্ট সিলেক্ট করা হয়, যাদের কাংখিত attribute এর মান একটি নির্দিষ্ট word ধারণ করে:

নিচের উদাহরণে সেইসব ইলামেন্ট সিলেক্ট করা হয়েছে, যাদের title এট্রিবিউটে “flower” word টি রয়েছে:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উক্ত উদাহরণটি title=”flower”, title=”summer flower”, এবং title=”flower new” বিশিষ্ট ইলামেন্ট সিলেক্ট করবে , কিন্তু title=”my-flower” অথবা title=”flowers” বিশিষ্ট ইলামেন্ট সিলেক্ট করবে না।


CSS [attribute|=”value”] Selector

[attribute|="value"] selector এর মাধ্যমে সেইসব ইলামেন্টকে সিলেক্ট করা হয়, যারা একটি নির্দিষ্ট attribute এর মান একটি নির্দিষ্ট word দিয়ে শুরু হয়।

নিচের উদাহরণটি ক্লাস এট্রিবিউটের মান “top” word দিয়ে শুরু হলে তাদেরকে সিলেক্ট করে:
বি:দ্র: মানটিকে একটি পুরো শব্দ হতে হবে। অথবা হাইফেন দিয়ে পৃথক হতে হবে, যেমন class=”top-text”।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS [attribute^=”value”] Selector

[attribute^="value"] selector দিয়ে সেইসব ইলামেন্টকে সিলেক্ট করা হয়, যাদের কোনো এট্রিবিউট এর মান নির্দিষ্ট word দিয়ে শুরু হয়।

নিচের উদাহরণটি ক্লাস এট্রিবিউটের মান “top” word দিয়ে শুরু হলে তাদেরকে সিলেক্ট করে:

বি:দ্র: এক্ষেত্রে মানটিকে সম্পূর্ণ word হতে হবে না।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS [attribute$=”value”] Selector

[attribute$="value"] selector দিয়ে যদি কোনো ইলামেন্টের একটি নির্দিষ্ট ইলামেন্টের মান একটি নির্দিষ্ট word দিয়ে শেষ হয়, তবে তাকে সিলেক্ট করে।

নিচের উদাহরণটি সেইসব ইলামেন্টকে সিলেক্ট করে , যাদের class এর মান “test” দিয়ে শেষ হয়:

বি:দ্র: মানটিকে পরিপূর্ণ শব্দ হতে হবে না।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS [attribute*=”value”] Selector

[attribute*="value"] selector দিয়ে যদি কোনো ইলামেন্টের একটি নির্দিষ্ট attribute এর মানের মধ্যে একটি নির্দিষ্ট word অন্তর্ভূক্ত থাকে তবে তাকে সিলেক্ট করে।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Styling Forms

attribute সিলেক্টর মাধ্যমে যেকোনো ফরম ডিজাইন করা যায়, যাদের class অথবা ID নাই:

Code Example

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

input[type=button] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চেষ্টা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »  Exercise 6 »