CSS Selector

By /

CSS নির্বাচক

আপনি স্টাইল করতে চান এমন সামগ্রী নির্বাচন করতে CSS নির্বাচক ব্যবহার করা হয়। নির্বাচকরা CSS নিয়ম সেটের অংশ। সিএসএস নির্বাচকরা এইচটিএমএল উপাদান নির্বাচন করে তার আইডি, শ্রেণি, প্রকার, বৈশিষ্ট্য ইত্যাদি অনুসারে।

সিএসএস-এ বিভিন্ন ধরণের নির্বাচক রয়েছে।

  1. CSS উপাদান নির্বাচক
  2. CSS আইডি নির্বাচক
  3. CSS ক্লাস নির্বাচক
  4. CSS ইউনিভার্সাল সিলেক্টর
  5. CSS গ্রুপ নির্বাচক

1) CSS উপাদান নির্বাচক

উপাদান নির্বাচক নাম অনুসারে HTML উপাদান নির্বাচন করে।

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p{  
  6.     text-align: center;  
  7.     color: blue;  
  8. }   
  9. </style>  
  10. </head>  
  11. <body>  
  12. <p>This style will be applied on every paragraph.</p>  
  13. <p id=“para1”>Me too!</p>  
  14. <p>And me!</p>  
  15. </body>  
  16. </html>    

2) CSS আইডি নির্বাচক

আইডি নির্বাচক একটি নির্দিষ্ট উপাদান নির্বাচন করতে একটি HTML উপাদানের আইডি বৈশিষ্ট্য নির্বাচন করে। পৃষ্ঠার মধ্যে একটি আইডি সর্বদা অনন্য হয় তাই এটি একটি একক, অনন্য উপাদান নির্বাচন করার জন্য বেছে নেওয়া হয়।

এটি হ্যাশ অক্ষর (#) দিয়ে লেখা হয়, তারপরে উপাদানটির আইডি।

আইডি “para1” এর সাথে একটি উদাহরণ নেওয়া যাক

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #para1 {  
  6.     text-align: center;  
  7.     color: blue;  
  8. }  
  9. </style>  
  10. </head>  
  11. <body>  
  12. <p id=“para1”>Hello Javatpoint.com</p>  
  13. <p>This paragraph will not be affected.</p>  
  14. </body>  
  15. </html>    

3) CSS ক্লাস নির্বাচক

The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name.

দ্রষ্টব্য: একটি ক্লাসের নাম একটি সংখ্যা দিয়ে শুরু করা উচিত নয়।

Let’s take an example with a class “center”.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. .center {  
  6.     text-align: center;  
  7.     color: blue;  
  8. }  
  9. </style>  
  10. </head>  
  11. <body>  
  12. <h1 class=“center”>This heading is blue and center-aligned.</h1>  
  13. <p class=“center”>This paragraph is blue and center-aligned.</p>   
  14. </body>  
  15. </html>  

নির্দিষ্ট উপাদানের জন্য CSS ক্লাস নির্বাচক

আপনি যদি নির্দিষ্ট করতে চান যে শুধুমাত্র একটি নির্দিষ্ট এইচটিএমএল উপাদান প্রভাবিত হবে তাহলে আপনাকে ক্লাস নির্বাচকের সাথে উপাদানের নাম ব্যবহার করা উচিত।

একটি উদাহরণ দেখা যাক।

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. p.center {  
  6.     text-align: center;  
  7.     color: blue;  
  8. }  
  9. </style>  
  10. </head>  
  11. <body>  
  12. <h1 class=“center”>This heading is not affected</h1>  
  13. <p class=“center”>This paragraph is blue and center-aligned.</p>   
  14. </body>  
  15. </html>   

4) CSS ইউনিভার্সাল সিলেক্টর

সর্বজনীন নির্বাচক একটি ওয়াইল্ডকার্ড অক্ষর হিসাবে ব্যবহৃত হয়। এটি পৃষ্ঠাগুলির সমস্ত উপাদান নির্বাচন করে।

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. * {  
  6.    color: green;  
  7.    font-size: 20px;  
  8. }   
  9. </style>  
  10. </head>  
  11. <body>  
  12. <h2>This is heading</h2>  
  13. <p>This style will be applied on every paragraph.</p>  
  14. <p id=“para1”>Me too!</p>  
  15. <p>And me!</p>  
  16. </body>  
  17. </html>    

5) CSS গ্রুপ নির্বাচক

গ্রুপিং নির্বাচক একই শৈলী সংজ্ঞা সহ সমস্ত উপাদান নির্বাচন করতে ব্যবহৃত হয়।

 

গ্রুপিং নির্বাচক কোড ছোট করতে ব্যবহার করা হয়. গ্রুপিংয়ে প্রতিটি নির্বাচককে আলাদা করতে কমা ব্যবহার করা হয়।

 

গ্রুপ সিলেক্টর ছাড়াই CSS কোড দেখি।

 
  1. h1 {  
  2.     text-align: center;  
  3.     color: blue;  
  4. }  
  5. h2 {  
  6.     text-align: center;  
  7.     color: blue;  
  8. }  
  9. p {  
  10.     text-align: center;  
  11.     color: blue;  
  12. }  

আপনি দেখতে পাচ্ছেন, আপনাকে সমস্ত উপাদানের জন্য CSS বৈশিষ্ট্য নির্ধারণ করতে হবে। এটি নিম্নলিখিত উপায়ে গোষ্ঠীভুক্ত করা যেতে পারে:

 
  1. h1,h2,p {  
  2.     text-align: center;  
  3.     color: blue;  
  4. }  

CSS গ্রুপ নির্বাচকের সম্পূর্ণ উদাহরণ দেখা যাক।

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. h1, h2, p {  
  6.     text-align: center;  
  7.     color: blue;  
  8. }  
  9. </style>  
  10. </head>  
  11. <body>  
  12. <h1>Hello Javatpoint.com</h1>  
  13. <h2>Hello Javatpoint.com (In smaller font)</h2>  
  14. <p>This is a paragraph.</p>  
  15. </body>  
  16. </html>  


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top