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

একটি সিএসএস সিলেক্টর এক বা একাধিক এইচটিএমএল এলিমেন্ট কে সিলেক্ট করে যেগুলোর জন্য আপনি স্টাইল করতে চান ।

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

সিএসএস সিলেক্টর গুলো সাধারনত এইচটিএমএল এলিমেন্ট গুলোকে খোজা ( সিলেক্ট করা) -র জন্য ব্যবহার হয় যেগুলোকে আপনি সাজাতে চান ।

আমরা সিএসএস সিলেক্টর গুলোকে পাঁচটি বিভাগে বিভক্ত করতে পারি:

• Simple selectors (id, class অথবা এলিমেন্ট নেমের উপর ভিত্তি করে সিলেক্ট করে )
• Combinator selectors (এইচটিএমএল এলিমেন্ট গুলোর সম্পর্কের উপর ভিত্তি করে সিলেক্ট করে )
• Pseudo-class selectors (একটি নির্দিষ্ট অবস্থার ভিত্তিতে এলিমেন্ট নির্বাচন করে )
• Pseudo-elements selectors (এলিমেন্টের একটি অংশ নির্বাচন করুন এবং স্টাইল করে )
• Attribute selectors (কোনও অ্যাট্রিবিউট বা অ্যাট্রিবিউটের মানের ভিত্তিতে উপাদান নির্বাচন করে )

এই পেজে আমরা বেসিক সিএসএস সম্পর্কে ধারনা দেবো এবং ধিরে ধিরে আগামী টিউটোরিয়াল গুলোতে অ্যাডভান্স সিএসএস ও জানবো ।

সিএসএস এলিমেন্ট সিলেক্টর

এলিমেন্ট সিলেক্টর এইচটিএমএল  এলিমেন্টের নামের উপর ভিত্তি করে সিলেক্ট করে । নিচের উদাহরন টি দেখুন

উদাহরন

নিচের উদাহরন টিতে আমরা <p> এলিমেন্টের জন্য লেখার কালার ও ফন্ট সাইজ পরিবর্তন করেছি ।

p {
  color: green;
  font-size:18px;
}

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

CSS id Selector

আইডি সিলেক্টর একটি নির্দিষ্ট উপাদান নির্বাচন করতে কোনও এইচটিএমএল উপাদানটির আইডি অ্যাট্রিবিউট ব্যবহার করে।

একটি এইচটিএমএল পেজের মধ্যে আইডি সবসময় ইউনিক হয়, তাই আইডি সিলেক্টর একটি ইউনিক এলিমেন্ট কে সিলেক্ট করতে ব্যবহার হয় ।

একটি নির্দিষ্ট ID দিয়ে একটি এলিমেন্ট সিলেক্ট করার সময় হ্যাস (#) চিহ্ন ব্যবহার করা হয় যার ঠিক পরের আইডি ভেলু টি থাকে । নিচের উদাহরন টি দেখুন ।

#para1 {
  text-align: center;
  color: red;
}

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

নোট: আইডি কখনওই নাম্বার দিয়ে শুরু হয়না এবং এর মধ্যে কোন ফাকা স্পেস ও থাকেনা

CSS class Selector

ক্লাস সিলেক্টর বা একটি নির্দিষ্ট শ্রেণীর বৈশিষ্ট্য (অ্যাট্রিবিউট) সহ এইচটিএমএল উপাদানগুলি নির্বাচন করে।

নির্দিষ্ট শ্রেণীর সাথে উপাদান নির্বাচন করতে, শ্রেণীর নাম অনুসারে একটি ডট(.) চিহ্ন দিয়ে লেখা হয়।

উদাহরন

নিচের উদাহরন এ আমরা HTML Element এর class = “center” এর জন্য সেন্টার এলাইনমেন্ট দেবো যাতে এর ভেরতের লেখা গুলো সেন্টার এলাইনমেন্ট  এ থাকে ।

.center {
  text-align: center;
  color: red;
}

নিচে চেষ্ঠা করুন

আপনি সেট করে দিতে পারেন যে কেবল নির্দিষ্ট এইচটিএমএল উপাদানগুলি কোনও ক্লাস দ্বারা প্রভাবিত হবে। যেমন সেই সব <p> element যেগুলোর ক্লাস center. নিচের উদাহরন টি দেখুন ।

উদাহরন

p.center {
  text-align: center;
  color: red;
}

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

এবার দেখবেন যে সব center ক্লাস সিলেক্ট হয়নি । শুধু মাত্র যে center ক্লাসটি <p> এর সাথে আছে, সেটি সিলেক্ট হয়েছে ।

এইচটিএমএল এলিমেন্টগুলি একাধিক ক্লাসও নিতে পারে।

উদাহরন

নিচে দেখুন <h2> এলিমেন্টে দুটি ক্লাস (ক্লাস ভেলু) city ও main ব্যবহার করা হয়েছে । এবং এই দুটিকে আলাদা আলাদা ভাবে স্টাইল করা যাবে ।

<h2 class="city main">London</h2>

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

নোট: class কখনওই নাম্বার দিয়ে শুরু হয়না তবে এর মধ্যে ফাকা স্পেস যাকে এবং সেগুলোকে আলাদা আলাদা ভাবে ধরে CSS rule লেখা যায় ।

CSS Universal Selector

সিএসএস ইউনিভার্সাল সিলেক্টর (*) টি একম এক সিলেক্টর যা দিয়ে সব এইচটিএমএল এলিমেন্ট কে সিলেক্ট করা যায় ।  আর এ ইউনিভার্সাল সিলেক্টর টি হচ্ছে * । নিচের উদাহরন টি দেখুন

উদাহরণ

* {
  text-align: center;
  color: blue;
}

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

সিএসএস সিলেক্টর গ্রুপিং

সিএসএস সিলেক্টর গ্রুপিং এর ধারনা টা হচ্ছে এমন যে একই সিএসএস স্টাইল একাধিক এলিমেন্টের জন্য আলাদা আলাদা না লিকে একসাথে গ্রুপ করে লেখা ।

নিচের কোড ব্লকটি আগে দেখুন, দেখবেন যে সিলেক্টর গুলো আলাদা আলাদা হলেও একই স্টাইল সবগুলোতে ।

h1 {
  text-align: center;
  color: green;
}

h2 {
  text-align: center;
  color: green;
}

p {
  text-align: center;
  color: green;
}

তো একই কোড বার বার না লিখে সিলেক্টর গুলো গ্রুপ করে নিতে পারি আমরা । এতে করে সিএসএস কোড কমে যাবে অনেকখানি।

CSS Group Selector এ কমা ( , ) দিয়ে আলাদা আলাদা করা হয় । নিচের উদাহরন টি দেখুন

উদাহরন

h1, h2, p { 
  text-align: center; 
  color: green;  
}

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

এক নজরে সিএসএস সিমপল সিলেক্টর গুলো