CSS পছন্দকৃত সিলেক্টর

CSS পছন্দকৃত সিলেক্টর

CSS সিলেক্টর এলিমেন্টগুলোকে ‘খুঁজতে’ (বা চিহ্নিত করা) ব্যবহার করে যাতে শৈলী নির্ধারণ করা যায়。

আমরা CSS সিলেক্টরকে পাঁচটি শ্রেণীতে ভাগ করতে পারি:

  • সহজ সিলেক্টর (নাম, id, শ্রেণী অনুযায়ী এলিমেন্টগুলোকে চিহ্নিত করা হবে)
  • কম্বিনেশন সিলেক্টর（এলিমেন্টগুলোকে তাদের মধ্যে নির্দিষ্ট সম্পর্ক অনুযায়ী চিহ্নিত করা হবে）
  • ফিকসড ক্লাস সিলেক্টর（এলিমেন্টগুলোকে নির্দিষ্ট অবস্থা অনুযায়ী চিহ্নিত করা হবে）
  • ফিকসড ইলিমেন্ট সিলেক্টর（এলিমেন্টগুলোর একটি অংশকে চিহ্নিত করে এবং তার শৈলী নির্ধারণ করা হবে）
  • এলিমেন্ট সিলেক্টর（এলিমেন্টগুলোকে প্রতিভাত এবং মাল্যমান দিয়ে চিহ্নিত করা হবে）

এই পৃষ্ঠায় সবচেয়ে সাধারণ CSS সিলেক্টরগুলোকে ব্যাখ্যা করা হবে。

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

ইউনিট সিলেক্টরটি HTML ইউনিটের নাম অনুযায়ী HTML ইউনিটকে নির্বাচন করে

উদাহরণ

এখানে, পৃষ্ঠার সকল <p> ইউনিটটি কেন্দ্রস্থলে অবস্থান করবে এবং লাল লিখিত হবে:

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

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

CSS id সিলেক্টর

id সিলেক্টরটি HTML ইউনিটের id অ্যাট্রিবিউটকে ব্যবহার করে নির্দিষ্ট ইউনিটকে নির্বাচন করে

ইউনিটের id পৃষ্ঠায় একক হয়, তাই id সিলেক্টরটি একক ইউনিটকে নির্বাচন করতে ব্যবহৃত হয়!

নির্দিষ্ট id-সহযোগ্য ইউনিটকে নির্বাচন করতে, একটি হাইপয়েন্ট (#) চিহ্ন লিখে এই ইউনিটের id-কে পুরোপুরি লিখুন。

উদাহরণ

এই CSS নিয়মটি id="para1"-এর HTML ইউনিটকে প্রয়োগ করবে:

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

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

মন্তব্য:id নাম সংখ্যা দিয়ে শুরু করতে পারে না。

CSS শ্রেণী সিলেক্টর

শ্রেণী সিলেক্টরটি শ্রেণী অ্যাট্রিবিউটসহযোগ্য HTML ইউনিটকে নির্বাচন করে

নির্দিষ্ট class-সহযোগ্য ইউনিটকে নির্বাচন করতে, একটি পয়েন্ট (.) চিহ্ন লিখে শ্রেণীকে পুরোপুরি লিখুন。

উদাহরণ

এই উদাহরণে, সকল class="center"-এর সঙ্গে যুক্ত HTML ইউনিটটি লাল রঙের হবে এবং কেন্দ্রস্থলে অবস্থান করবে:

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

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

আপনি একটি নির্দিষ্ট HTML ইউনিটকে শুধুমাত্র কিছু শ্রেণীর প্রভাবে সম্মত করতেও পারেন。

উদাহরণ

এই উদাহরণে, শুধুমাত্র class="center"-এর সঙ্গে যুক্ত <p> ইউনিটটি কেন্দ্রস্থলে অবস্থান করবে:

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

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

HTML ইউনিটও একাধিক শ্রেণীকে উল্লেখ করতে পারে

উদাহরণ

এই উদাহরণে, <p> ইউনিটটি class="center" এবং class="large"-এর ভিত্তিতে স্টাইল নির্দেশনা করা হবে:

<p class="center large">এই অনুচ্ছেদটি দুটি শ্রেণীকে উল্লেখ করে:</p>

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

মন্তব্য:শব্দকোষ নাম সংখ্যা দিয়ে শুরু করতে পারে না!

CSS সাধারণ সিলেক্টর

সাধারণ সিলেক্টর (*): পৃষ্ঠার সকল HTML ইউনিটকে নির্বাচন করে

উদাহরণ

নিচের CSS নিয়মটি পৃষ্ঠার সকল HTML ইউনিটকে প্রভাবিত করবে:

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

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

CSS গ্রুপ সিলেক্টর

গ্রুপ সিলেক্টরটি সমস্ত একই স্টাইল নির্দেশনা সহযোগ্য HTML ইউনিটগুলোকে নির্বাচন করে。

এখানে, নিচের CSS কোডটি (h1, h2 এবং p ইউনিটগুলোর সমস্ত স্টাইল নির্দেশনা):

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

সেরা পদ্ধতি হল সিলেক্টরকে গ্রুপ করা, যাতে কোডটি সবচেয়ে বেশি কম হয়。

যদি সিলেক্টরকে গ্রুপ করতে হয়, তবে প্রত্যেক সিলেক্টরকে কমা (,) দিয়ে বিভক্ত করুন。

উদাহরণ

এই উদাহরণে, আমরা উপরোক্ত কোডের সিলেক্টরকে গ্রুপ করছি:

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

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

সকল সহজ CSS সিলেক্টর

সিলেক্টর উদাহরণ উদাহরণ বর্ণনা
.class .intro class="intro" তরীগুলো সকল নির্বাচন করুন。
#id #firstname id="firstname" এলিমেন্টটি নির্বাচন করুন。
* * সকল এলিমেন্ট নির্বাচন করুন。
element p সকল <p> এলিমেন্ট নির্বাচন করুন。
element,element,.. div, p সকল <div> এলিমেন্ট এবং সকল <p> এলিমেন্ট নির্বাচন করুন。

সম্প্রসারিত পড়া

অতিরিক্ত পুস্তকঃCSS এলিমেন্ট সিলেক্টর

অতিরিক্ত পুস্তকঃCSS সিলেক্টর গ্রুপিং

অতিরিক্ত পুস্তকঃCSS ক্লাস সিলেক্টর বিস্তার

অতিরিক্ত পুস্তকঃCSS ID সিলেক্টর বিস্তার

অতিরিক্ত পুস্তকঃCSS এট্রিবিউট সিলেক্টর বিস্তার

অতিরিক্ত পুস্তকঃCSS পরবর্তী সিলেক্টর

অতিরিক্ত পুস্তকঃCSS সাব-এলিমেন্ট সিলেক্টর

অতিরিক্ত পুস্তকঃCSS আধিকারিক ভাইনার সিলেক্টর