সিএসএস এট্রিবিউট সিলেক্টর

নির্দিষ্ট এট্রিবিউটের সাহায্যে এইচটিএমএল এলিমেন্টকে স্টাইল করা

কোন একটি নির্দিষ্ট এট্রিবিউট অথবা এট্রিবিউটের ভ্যালুকে সিলেক্টের মাধ্যমে এইচটিএমএল এলিমেন্টকে স্টাইল করা সম্ভব।

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

[attribute] সিলেক্টরের সাহায্যে নির্দিষ্ট এট্রিবিউট যুক্ত এলিমেন্টকে সিলেক্ট করা যায়।

নিচের উদাহরণে target এট্রিবিউট যুক্ত সকল <a> এলিমেন্ট সিলেক্ট করা হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>link background color by target attribute </title>
<style>
a[target] {
    background-color: black;
}
</style>
</head>
<body>

<p> টার্গেট এট্রিবিউট দ্বারা লিংকটির ব্রেকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে। </p>
<a href="https://www.sattit.com">sattit.com</a>
<a href="../../external.html?link=http://www.bloodgroupbd.com/" target="_blank">bloodgroupbd.com</a>
<a href="../../external.html?link=http://www.sattacademy.org/" target="_top">sattacademy.org</a>


</body>
</html>

ফলাফল

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

[attribute="value"] সিলেক্টরের মাধ্যমে নির্দিষ্ট এট্রিবিউট এবং এট্রিবিউটের ভ্যালু যুক্ত এলিমেন্টকে সিলেক্ট করা যায়।

নিচের উদাহরণে target="_blank" এট্রিবিউট যুক্ত সকল <a> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title> attribute  valu selector</title>
<style>
a[target=_blank] {
    background-color: black;
}
</style>
</head>
<body> 

<p> target="_blank" করা লিংকটি কালো কালারের ব্যাকগ্রাউন্ড পাবেঃ</p>
<a href="www.sattit.com">sattit.com</a>
<a href="www.sattacademy.org" target="_blank">sattacademy.org</a>
<a href="www.sattacademy.com" target="_top">sattacadaemy.com</a>


</body>
</html>

ফলাফল

সিএসএস [attribute~="value"] সিলেক্টর

[attribute~="value"] সিলেক্টরের মাধ্যমে এট্রিবিউটের ভ্যালুর কোন একটি নির্দিষ্ট শব্দের সাহায্যে এলিমেন্টকে সিলেক্ট করা যায়।

নিচের উদাহরণে, title এট্রিবিউটের ভ্যালুর মধ্যে একটি সতন্ত্র শব্দ "satt" যুক্ত সকল এলিমেন্টকে সিলেক্ট করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>attribute  valu selector by fixed word</title>
<style>
[title~="satt"] {
    border: 8px solid green;
}
</style>
</head>
<body>

<p>যে ইমেজ গুলোর টাইটেলে "satt" শব্দটি রয়েছে তার বর্ডার কালার হলুদ করা হয়েছে।</p>
<img src="../css_examples/satt_bangla1.jpg" title=" chandpur satt" width="150" height="113">
<img src="../css_examples/satt.jpg" title="logo_satt" width="224" height="162">
<img src="../css_examples/satt.png" title="satt logo" width="200" height="358">


</body>
</html>

ফলাফল

উপরের উদাহরণে title=" chandpur satt", এবং title="satt logo" যুক্ত এলিমেন্টগুলোর সাথে ম্যাচ(match ) করবে। কিন্তু title="our-satt" অথবা title="satts" যুক্ত এলিমেন্টের সাথে ম্যাচ করবে না।

সিএসএস [attribute|="value"] সিলেক্টর

[attribute|="value"] সিলেক্টরের মাধ্যমে কোন নির্দিষ্ট এট্রিবিউটের একটি নির্দিষ্ট ভ্যালু দিয়ে শুরু হওয়া এলিমেন্টকে সিলেক্ট করা যায়।

নিচের উদাহরণে class এট্রিবিউটের "satt" শব্দ দিয়ে শুরু হওয়া ভ্যালু যুক্ত সকল এলিমেন্টকে সিলেক্ট করা হয়েছেঃ

নোটঃ ভ্যালু অবশ্যই একটি পুরো শব্দ হতে হবে। যেমনঃ-class="satt",class="satt_info",class="satt-name" অথবা class="sattservicee"!

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title> attribute  select by  start word</title>
<style>
[class|="satt"] {
    background: green;
}
</style>
</head>
<body>

<h1 class="satt_name"> স্যাট একাডেমি </h1>
<p class="satt-info">চাদপুর বাংলাদেশ</p>
<p class="sattservice"> আইটি ক্ষেত্রে এক বিপ্লবের নাম স্যাট।</p>


</body>
</html>

ফলাফল

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

[attribute^="value"] সিলেক্টরটি এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউটের ভ্যালু কোন একটি নির্দিষ্ট ভ্যালু দিয়ে শুরু হয়।

নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করবে যাদের এট্রিবিউটের ভ্যালু "satt" দিয়ে শুরু হয়েছে।

নোট: ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে। যেমন: class="satt", অথবা হাইফেন ( - ) দ্বারাও ব্যবহার করা যেতে পারে। যেমনঃ class="satt-name"! ,class="satt_info"!

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title> attribute select by  start word</title>

<style>
[class^="satt"] {
    background: green;
}
</style>
</head>
<body>

<h1 class="satt_name"> স্যাট একাডেমি </h1>
<p class="satt-info">চাদপুর বাংলাদেশ</p>
<p class="sattservice"> আইটি ক্ষেত্রে এক বিপ্লবের নাম স্যাট।</p>

<p><b> বি দ্রঃ</b> ইন্টারনেট এক্সপ্লোরারে[<i> [attribute~="value"]</i>]  দুত কাজ  করানোর স্বার্থে  DOCTYPE ডিক্লেয়ার করতে হবে।</p>

</body>
</html>

ফলাফল

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

[attribute$="value"] সিলেক্টরটি এমন এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউটের ভ্যালু কোন একটি নির্দিষ্ট ভ্যালু দিয়ে শেষ হয়।

নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করবে যাদের এট্রিবিউট class এবং যার ভ্যালু "satt" দিয়ে শেষ হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title></title>
<style>
[class$="satt"] {
    background:green;
}
</style>
</head>
<body>

<div class="info_satt">সিলেক্ট হবে</div>
<div class="select">সিলেক্ট হবেনা</div>
<div class="our_satt">সিলেক্ট হবে</div>
<p class="chandpursatt">সিলেক্ট হবে</p>

</body>
</html>

ফলাফল

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

[attribute*="value"] সিলেক্টরটি এমন এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউট একটি নির্দিষ্ট ভ্যালু বহন করে।

নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করে যার class এট্রিবিউটের ভ্যালু "sa" বর্ণগুলো বহন করেঃ

নোটঃ ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title></title>
<style>
[class*="sa"] {
    background: aqua;
}
</style>
</head>
<body>

<div class="info_satt">সিলেক্ট হবে</div>
<div class="select">সিলেক্ট হবেনা</div>
<div class="our-satt">সিলেক্ট হবে</div>
<p class="chandpursatt">সিলেক্ট হবে</p>

</body>
</html>

ফলাফল

এট্রিবিউট সিলেক্টরের মাধ্যমে ফর্ম স্টাইল করা

class বা ID ছাড়াও এট্রিবিউট সিলেক্টরের মাধ্যমে ফরম স্টাইল করা সহজ।

উদাহরণ

<!DOCTYPE html>
 <html>
<head>
   <title> style form by attribute selector</title>
<style>
input[type=text] {
    width: 200px;
    display: block;
    margin-bottom: 2px;
    margin-bottom: 15px;
    background-color: black;
}
input[type=button] {
    width: 80px;
    margin-left: 0px;
    margin-top: 30px;
    display: block;
}
</style>
</head>
<body>

<form name="input" action="#" method="get">
 নামের প্রথম অংশ:<input type="text" name="Name" value="নূর মোহাম্মদ" size="20">
  নামের শেষ অংশ :<input type="text" name="Name" value="রাজু" size="20">
  <input type="button" value="বাটন">
</form>

ফলাফল

বিঃ দ্র: ইন্টারনেট এক্সপ্লোরের[এট্রিবিউট] দ্রুত কাজ করানোর জন্য DOCTYPE অবশ্যই ডিক্লেয়ার করতে হবে

টিপস: ফর্ম স্টাইল সম্মন্ধে আরো জানতে আমাদের সিএসএস ফরম অধ্যায় ভিজিট করুন।

সিএসএস সিলেক্টরের সম্পূর্ণ রেফারেন্সের জন্য আমাদের সিএসএস সিলেক্টর অধ্যায়টি পড়ূন।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল

সিএসএস-৩

সিএসএস রেসপন্সিভ

সিএসএস রেফারেন্স

সিএসএস এট্রিবিউট সিলেক্টর

নির্দিষ্ট এট্রিবিউটের সাহায্যে এইচটিএমএল এলিমেন্টকে স্টাইল করা

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

সিএসএস [attribute~="value"] সিলেক্টর

উদাহরণ

ফলাফল

সিএসএস [attribute|="value"] সিলেক্টর

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

এট্রিবিউট সিলেক্টরের মাধ্যমে ফর্ম স্টাইল করা

উদাহরণ

ফলাফল

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য