নির্বাচক

সিএসএস পডকাস্ট - 002: নির্বাচক

আপনি যদি এমন কিছু পাঠ্য পেয়ে থাকেন যা আপনি শুধুমাত্র বড় এবং লাল হতে চান যদি এটি একটি নিবন্ধের প্রথম অনুচ্ছেদ হয়, তাহলে আপনি কীভাবে তা করবেন?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

আপনি একটি CSS নির্বাচক ব্যবহার করে সেই নির্দিষ্ট উপাদানটি খুঁজে পেতে এবং একটি CSS নিয়ম প্রয়োগ করতে পারেন, যেমন।

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS আপনাকে উপাদানগুলি নির্বাচন করার এবং তাদের উপর নিয়ম প্রয়োগ করার জন্য অনেকগুলি বিকল্প সরবরাহ করে, খুব সাধারণ থেকে খুব জটিল পর্যন্ত, এই ধরনের পরিস্থিতি সমাধানে সহায়তা করতে।

একটি CSS নিয়মের অংশ

নির্বাচকরা কীভাবে কাজ করে এবং CSS-এ তাদের ভূমিকা বোঝার জন্য, CSS নিয়মের অংশগুলি জানা গুরুত্বপূর্ণ। একটি CSS নিয়ম হল কোডের একটি ব্লক, যাতে এক বা একাধিক নির্বাচক এবং এক বা একাধিক ঘোষণা থাকে।

এই CSS নিয়মে, নির্বাচক হল .my-css-rule যা পৃষ্ঠায় my-css-rule ক্লাস সহ সমস্ত উপাদান খুঁজে পায়। কোঁকড়া বন্ধনীর মধ্যে তিনটি ঘোষণা রয়েছে। একটি ঘোষণা হল একটি সম্পত্তি এবং মান জোড়া যা নির্বাচকদের দ্বারা মিলে যাওয়া উপাদানগুলিতে শৈলী প্রয়োগ করে। একটি CSS নিয়ম আপনার পছন্দ অনুযায়ী অনেক ঘোষণা এবং নির্বাচক থাকতে পারে।

সরল নির্বাচক

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

সর্বজনীন নির্বাচক

একটি সার্বজনীন নির্বাচক —যা ওয়াইল্ডকার্ড নামেও পরিচিত—যেকোনো উপাদানের সাথে মেলে।

* {
  color: hotpink;
}

এই নিয়মের ফলে পৃষ্ঠার প্রতিটি HTML উপাদানে হটপিঙ্ক টেক্সট থাকে।

টাইপ নির্বাচক

একটি প্রকার নির্বাচক সরাসরি একটি HTML উপাদানের সাথে মেলে।

section {
  padding: 2em;
}

এই নিয়মের ফলে প্রতিটি <section> উপাদানের চারপাশে 2em padding থাকে।

ক্লাস নির্বাচক

একটি HTML এলিমেন্টের class অ্যাট্রিবিউটে সংজ্ঞায়িত এক বা একাধিক আইটেম থাকতে পারে। ক্লাস নির্বাচক যে কোনো উপাদানের সাথে মেলে যেটিতে সেই শ্রেণীটি প্রয়োগ করা হয়েছে।

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

যে কোনো উপাদান যেটিতে ক্লাসটি প্রয়োগ করা হয়েছে তা লাল রঙের হবে:

.my-class {
  color: red;
}

লক্ষ্য করুন কিভাবে . শুধুমাত্র CSS-এ উপস্থিত এবং HTML-এ নয় । এর কারণ হল . অক্ষর CSS ভাষাকে ক্লাস অ্যাট্রিবিউট মেম্বারদের সাথে মেলাতে নির্দেশ দেয়। এটি CSS-এর একটি সাধারণ প্যাটার্ন, যেখানে একটি বিশেষ অক্ষর বা অক্ষরের সেট, নির্বাচকের ধরন নির্ধারণ করতে ব্যবহৃত হয়।

.my-class এর একটি ক্লাস আছে এমন একটি HTML উপাদান এখনও উপরের CSS নিয়মের সাথে মিলে যাবে, যদিও তাদের আরও কয়েকটি ক্লাস থাকে, যেমন:

<div class="my-class another-class some-other-class"></div>

এর কারণ হল CSS একটি class অ্যাট্রিবিউটের সন্ধান করে যাতে সংজ্ঞায়িত ক্লাস থাকে , বরং সেই ক্লাসের সাথে হুবহু মেলে।

আইডি নির্বাচক

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

#rad {
  border: 1px solid blue;
}

এই CSS HTML এলিমেন্টে একটি নীল বর্ডার প্রয়োগ করবে যার একটি id এর rad আছে, যেমন:

<div id="rad"></div>

একইভাবে ক্লাস সিলেক্টরের কাছে . , একটি # অক্ষর ব্যবহার করে সিএসএসকে নির্দেশনা দিয়ে এমন একটি উপাদান সন্ধান করুন যা এটি অনুসরণকারী id সাথে মেলে।

বৈশিষ্ট্য নির্বাচক

আপনি বৈশিষ্ট্য নির্বাচক ব্যবহার করে একটি নির্দিষ্ট HTML বৈশিষ্ট্য আছে বা একটি HTML বৈশিষ্ট্যের জন্য একটি নির্দিষ্ট মান আছে এমন উপাদানগুলি সন্ধান করতে পারেন। বর্গাকার বন্ধনী ( [ ] ) দিয়ে নির্বাচককে মোড়ানোর মাধ্যমে বৈশিষ্ট্যগুলি সন্ধান করতে CSS নির্দেশ করুন।

[data-type='primary'] {
  color: red;
}

এই CSS এমন সমস্ত উপাদানের সন্ধান করে যেগুলির primary মান সহ data-type একটি বৈশিষ্ট্য রয়েছে, যেমন:

<div data-type="primary"></div>

data-type একটি নির্দিষ্ট মান খোঁজার পরিবর্তে, আপনি উপস্থিত বৈশিষ্ট্য সহ উপাদানগুলিও দেখতে পারেন, এর মান নির্বিশেষে।

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

এই উভয় <div> উপাদানের লাল টেক্সট থাকবে।

আপনি আপনার অ্যাট্রিবিউট সিলেক্টরে একটি s অপারেটর যোগ করে কেস-সংবেদনশীল অ্যাট্রিবিউট সিলেক্টর ব্যবহার করতে পারেন।

[data-type='primary' s] {
  color: red;
}

এর মানে হল যে যদি একটি এইচটিএমএল এলিমেন্টে primary পরিবর্তে Primary data-type থাকে, তাহলে এটি লাল টেক্সট পাবে না। আপনি একটি i অপারেটর ব্যবহার করে বিপরীত - কেস সংবেদনশীলতা - করতে পারেন।

কেস অপারেটরগুলির সাথে, আপনার কাছে এমন অপারেটরগুলিতে অ্যাক্সেস রয়েছে যা বৈশিষ্ট্য মানের ভিতরে স্ট্রিংগুলির অংশগুলির সাথে মেলে।

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

গ্রুপিং নির্বাচক

একজন নির্বাচককে শুধুমাত্র একটি উপাদানের সাথে মিল রাখতে হবে না। আপনি একাধিক নির্বাচককে কমা দিয়ে আলাদা করে গ্রুপ করতে পারেন:

strong,
em,
.my-class,
[lang] {
  color: red;
}

এই উদাহরণটি <strong> উপাদান এবং <em> উপাদান উভয়ের জন্য রঙ পরিবর্তনকে প্রসারিত করে। এটি .my-class নামক একটি শ্রেণীতেও প্রসারিত, এবং একটি উপাদান যার একটি lang বৈশিষ্ট্য রয়েছে৷

আপনার উপলব্ধি পরীক্ষা করুন

সহজ নির্বাচকদের আপনার জ্ঞান পরীক্ষা করুন

* {}

div {}

সিউডো-ক্লাস এবং ছদ্ম-উপাদান

CSS উপযোগী নির্বাচক প্রকারগুলি প্রদান করে যেগুলি নির্দিষ্ট প্ল্যাটফর্মের অবস্থার উপর ফোকাস করে, যেমন যখন একটি উপাদান হোভার করা হয়, একটি উপাদানের ভিতরের কাঠামো বা একটি উপাদানের অংশ।

ছদ্ম-শ্রেণী

এইচটিএমএল উপাদানগুলি নিজেদেরকে বিভিন্ন অবস্থায় খুঁজে পায়, হয় তাদের সাথে মিথস্ক্রিয়া হওয়ার কারণে, অথবা তাদের শিশু উপাদানগুলির একটি নির্দিষ্ট অবস্থায় রয়েছে৷

উদাহরণস্বরূপ, একটি এইচটিএমএল উপাদান ব্যবহারকারীর দ্বারা মাউস পয়েন্টার দিয়ে হোভার করা যেতে পারে বা ব্যবহারকারীর দ্বারা একটি শিশু উপাদানও হভার করা যেতে পারে। এই পরিস্থিতিতে, :hover pseudo-class ব্যবহার করুন।

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

সিউডো-ক্লাস মডিউলে আরও জানুন।

ছদ্ম-উপাদান

ছদ্ম-উপাদানগুলি ছদ্ম-শ্রেণির থেকে আলাদা কারণ প্ল্যাটফর্মের অবস্থার প্রতিক্রিয়া না করে, তারা এমনভাবে কাজ করে যেন তারা CSS-এর সাথে একটি নতুন উপাদান সন্নিবেশ করছে। ছদ্ম-উপাদানগুলিও সিউডো-ক্লাস থেকে সিনট্যাক্টিকভাবে আলাদা, কারণ একটি একক কোলন ( : :) ব্যবহার করার পরিবর্তে আমরা একটি ডবল কোলন ( :: :) ব্যবহার করি।

.my-element::before {
  content: 'Prefix - ';
}

উপরের ডেমোতে যেমন আপনি একটি লিঙ্কের লেবেলটি ফাইলের প্রকারের সাথে প্রিফিক্স করেছেন, আপনি একটি উপাদানের শুরুতে বিষয়বস্তু সন্নিবেশ করার জন্য ::before pseudo-element ব্যবহার করতে পারেন, অথবা ::after pseudo-element ব্যবহার করতে পারেন। একটি উপাদানের শেষে

যদিও ছদ্ম-উপাদানগুলি সামগ্রী সন্নিবেশের মধ্যে সীমাবদ্ধ নয়। আপনি একটি উপাদান নির্দিষ্ট অংশ টার্গেট করতে তাদের ব্যবহার করতে পারেন. উদাহরণস্বরূপ, ধরুন আপনার একটি তালিকা আছে। তালিকার প্রতিটি বুলেট পয়েন্ট (বা সংখ্যা) স্টাইল করতে ::marker ব্যবহার করুন

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

ব্যবহারকারীর দ্বারা হাইলাইট করা বিষয়বস্তু স্টাইল করার জন্য আপনি ::selection ব্যবহার করতে পারেন।

::selection {
  background: black;
  color: white;
}

সিউডো-এলিমেন্টের মডিউলে আরও জানুন।

আপনার উপলব্ধি পরীক্ষা করুন

ছদ্ম নির্বাচকদের আপনার জ্ঞান পরীক্ষা করুন

p:hover {
  background: white;
  color: black;
}

জটিল নির্বাচক

আপনি ইতিমধ্যে নির্বাচকদের একটি বিশাল অ্যারে দেখেছেন, কিন্তু কখনও কখনও, আপনার CSS এর সাথে আপনার আরও সূক্ষ্ম নিয়ন্ত্রণের প্রয়োজন হবে। এখানেই জটিল নির্বাচকরা সাহায্য করতে এগিয়ে আসে।

এই মুহুর্তে এটি মনে রাখা মূল্যবান যে যদিও নিম্নলিখিত নির্বাচকরা আমাদের আরও শক্তি দেয়, আমরা কেবল শিশু উপাদান নির্বাচন করে নীচের দিকে ক্যাসকেড করতে পারি। আমরা উপরের দিকে লক্ষ্য করতে এবং একটি মূল উপাদান নির্বাচন করতে সক্ষম নই। ক্যাসকেড কী এবং এটি কীভাবে কাজ করে তা আমরা পরবর্তী পাঠে কভার করব।

কম্বিনেটর

দুই নির্বাচকের মধ্যে যেটি বসে থাকে তাকে কম্বিনেটর বলে। উদাহরণস্বরূপ, যদি নির্বাচকটি p > strong হয়, তাহলে সংযোজক হল > অক্ষর। যে নির্বাচকরা এই কম্বিনেটর ব্যবহার করে তারা আপনাকে নথিতে তাদের অবস্থানের উপর ভিত্তি করে আইটেম নির্বাচন করতে সহায়তা করে।

বংশধর সংযোজক

বংশধর সংযোজক বোঝার জন্য, আপনাকে প্রথমে পিতামাতা এবং শিশু উপাদানগুলি বুঝতে হবে।

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

মূল উপাদান হল <p> যাতে পাঠ্য থাকে। সেই <p> উপাদানটির ভিতরে একটি <strong> উপাদান রয়েছে, যা এর বিষয়বস্তুকে সাহসী করে তোলে। কারণ এটি <p> এর ভিতরে রয়েছে, এটি একটি শিশু উপাদান।

একটি বংশধর সংযোজক আমাদের একটি শিশু উপাদান লক্ষ্য করতে অনুমতি দেয়. এটি একটি স্থান ব্যবহার করে ( ) ব্রাউজারকে শিশু উপাদানগুলি সন্ধান করতে নির্দেশ দিতে:

p strong {
  color: blue;
}

এই স্নিপেটটি সমস্ত <strong> উপাদান নির্বাচন করে যেগুলি শুধুমাত্র <p> উপাদানগুলির চাইল্ড উপাদান, সেগুলিকে পুনরাবৃত্তভাবে নীল করে তোলে।

কম্বিনেটার নির্বাচক, .top div ব্যবহার করে উপরের উদাহরণে এই প্রভাবটি আরও ভালভাবে কল্পনা করা হয়েছে। সেই CSS নিয়ম সেই <div> উপাদানগুলিতে বাম প্যাডিং যোগ করে। যেহেতু কম্বিনেটরটি পুনরাবৃত্ত, তাই .top এ থাকা সমস্ত <div> উপাদানগুলিতে একই প্যাডিং প্রয়োগ করা হবে।

এই ডেমোতে এইচটিএমএল প্যানেলটি দেখুন কিভাবে .top এলিমেন্টে বেশ কিছু <div> চাইল্ড এলিমেন্ট আছে যেগুলোতে <div> চাইল্ড এলিমেন্ট আছে।

পরবর্তী ভাইবোন কম্বিনেটর

আপনি আপনার নির্বাচকের একটি + অক্ষর ব্যবহার করে অবিলম্বে অন্য উপাদান অনুসরণ করে এমন একটি উপাদান সন্ধান করতে পারেন।

স্তুপীকৃত উপাদানগুলির মধ্যে স্থান যোগ করতে, শুধুমাত্র একটি উপাদান .top এর একটি চাইল্ড এলিমেন্টের পরবর্তী ভাইবোন হলেই স্থান যোগ করতে পরবর্তী ভাইবোন কম্বিনেটার ব্যবহার করুন।

আপনি নিম্নলিখিত নির্বাচক ব্যবহার করে .top এর সমস্ত চাইল্ড উপাদানে মার্জিন যোগ করতে পারেন:

.top * {
  margin-top: 1em;
}

এর সাথে সমস্যা হল যে আপনি .top এর প্রতিটি চাইল্ড উপাদান নির্বাচন করছেন, এই নিয়মটি সম্ভাব্য অতিরিক্ত, অপ্রয়োজনীয় স্থান তৈরি করে। পরবর্তী ভাইবোন কম্বিনেটার , একটি সার্বজনীন নির্বাচকের সাথে মিশ্রিত করা আপনাকে কেবলমাত্র কোন উপাদানগুলি স্থান পায় তা নিয়ন্ত্রণ করতে সক্ষম করে না, তবে যে কোনও উপাদানে স্থান প্রয়োগ করতেও সক্ষম করে৷ এটি আপনাকে কিছু দীর্ঘমেয়াদী নমনীয়তা প্রদান করে, তা নির্বিশেষে .top এ এইচটিএমএল এলিমেন্টগুলি দেখা যাক।

পরবর্তী- ভাইবোন কম্বিনেটর

একটি পরবর্তী সংযোজক একটি পরবর্তী ভাইবোন নির্বাচকের সাথে খুব মিল। একটি + অক্ষরের পরিবর্তে, একটি ~ অক্ষর ব্যবহার করুন। এটি কীভাবে আলাদা তা হল যে একটি উপাদানকে একই পিতামাতার সাথে পরবর্তী উপাদান হওয়ার পরিবর্তে একই পিতামাতার সাথে অন্য একটি উপাদান অনুসরণ করতে হবে।

এই পরবর্তী সংযোজকটি একটু কম দৃঢ়তা প্রদান করে, যা উপরের নমুনার মতো প্রেক্ষাপটে উপযোগী, যেখানে আমরা একটি কাস্টম সুইচের রঙ পরিবর্তন করি যখন এর সাথে যুক্ত চেকবক্সে :checked অবস্থা থাকে।

শিশু সংযোজক

একটি শিশু সংযোজক (সরাসরি বংশধর হিসাবেও পরিচিত) আপনাকে সংযোজক নির্বাচকদের সাথে আসা পুনরাবৃত্তির উপর আরও নিয়ন্ত্রণ করতে দেয়। > অক্ষর ব্যবহার করে, আপনি সংযোজক নির্বাচককে শুধুমাত্র সরাসরি শিশুদের জন্য প্রয়োগ করতে সীমাবদ্ধ করেন।

আগের, পরবর্তী ভাইবোন নির্বাচক উদাহরণ বিবেচনা করুন। স্থানটি প্রতিটি পরবর্তী ভাইবোনের সাথে যোগ করা হয়, কিন্তু যদি এই উপাদানগুলির মধ্যে একটিতেও সন্তান হিসাবে পরবর্তী ভাইবোন উপাদান থাকে, তাহলে এটি অবাঞ্ছিত, অতিরিক্ত ব্যবধান তৈরি করতে পারে।

এই সমস্যাটি দূর করতে, পরবর্তী ভাইবোন নির্বাচক পরিবর্তন করে একটি চাইল্ড কম্বিনেটর অন্তর্ভুক্ত করুন: > * + * । নিয়মটি এখন শুধুমাত্র .top এর সরাসরি শিশুদের জন্য প্রযোজ্য হবে।

যৌগ নির্বাচক

আপনি নির্দিষ্টতা এবং পঠনযোগ্যতা বাড়াতে নির্বাচকদের একত্রিত করতে পারেন। উদাহরণস্বরূপ, <a> উপাদানগুলিকে লক্ষ্য করার জন্য, যেগুলির .my-class এর একটি শ্রেণীও রয়েছে, নিম্নলিখিতগুলি লিখুন:

a.my-class {
  color: red;
}

এটি সমস্ত লিঙ্কে একটি লাল রঙ প্রয়োগ করবে না এবং এটি শুধুমাত্র .my-class লাল রঙ প্রয়োগ করবে যদি এটি একটি <a> উপাদানে থাকে। এই বিষয়ে আরও জানতে, নির্দিষ্টতা মডিউল দেখুন।

আপনার উপলব্ধি পরীক্ষা করুন

জটিল নির্বাচকদের আপনার জ্ঞান পরীক্ষা করুন

section.awesome {
  border: 1px solid hotpink;
}

সম্পদ

• CSS নির্বাচকদের রেফারেন্স
• ইন্টারেক্টিভ নির্বাচকদের খেলা
• ছদ্ম-শ্রেণী এবং ছদ্ম-উপাদানের রেফারেন্স
• একটি টুল যা CSS নির্বাচকদেরকে সরল-ইংরেজি ব্যাখ্যাকারীতে অনুবাদ করে