সিএসএস এট্রিবিউট সিলেক্টর - Css Attribute Selector



এইচটিএমএল এলিমেন্টগুলোকে নির্দিষ্ট এট্রিবিউটের সাহায্যে সিএসএস এর মাধ্যমে স্টাইলিং করা যায়।


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

শুধু class এবং id এট্রিবিউট ছাড়াই নির্দিষ্ট এট্রিবিউট ব্যবহার করে এইচটিএমএল এলিমেন্টের স্টাইলিং করা যায়।

নোট: - যদি IE7 এবং IE8 এ একটি ডকটাইপ ডিক্লারেশন করা হয় তবেই কেবল Attribute selection কাজ করবে। IE6 কিন্তু Attribute selection সমর্থন বা support করে না।


Attribute Selector

title এট্রিবিউটের সাথে সংযুক্ত সকল এলিমেন্টকে নীচের উদাহরণের মাধ্যমে স্টাইলিং করা যায় -

উদাহরণ

[title]
{
color:blue;
}



কোড এডিটরে দেখুন



Attribute এবং Value Selector

সিএসএস ব্যবহার করে একটি নির্দিষ্ট টাইটেল এর সমস্ত এলিমেন্টের স্টাইলিং করা যায়। websschool নামের সব এলিমেন্ট টাইটেলগুলোর স্টাইলিং করার জন্য নীচে একটি উদাহরণ দেখুন -

উদাহরণ

[title=websschool]
{
border:5px solid green;
}



কোড এডিটরে দেখুন



Attribute এবং Value Selector - একাধিক Value

একটি নির্দিষ্ট টাইটেল এর সমস্ত এলিমেন্টের স্টাইলিং করা যায় একটি title attribute যার একটি নির্দিষ্ট মান আছে।


উদাহরণ

[title~=hello] { color:blue; }



কোড এডিটরে দেখুন


উদাহরণ

[lang|=en] { color:blue; }



কোড এডিটরে দেখুন



Styling ফর্ম

class এবং id ছাড়াই এইচটিএমএল ফর্ম স্টাইলিং করার জন্য attribute selector ব্যবহার করা লাভজনক।
নীচে একটি উদাহরণ দেখুন -

উদাহরণ

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



কোড এডিটরে দেখুন








এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2019 by websschool.com, All Rights Reserved.