সিলেক্টরস – ফ্রি HTML ও CSS কোর্স – ক্লাস ৯

সিএসএস সিলেক্টর কোনও পৃষ্ঠার উপাদানগুলির একটি উপসেটে কোয়েরি সংজ্ঞায়িত করার জন্য অত্যন্ত দরকারী। কোয়েরি আমাদের দুটি কাজের মধ্যে একটি করতে দেয়:

  1. সিএসএস স্টাইলশিটে উপাদানগুলির সেটগুলিতে প্রয়োগ করার জন্য একটি স্টাইল ঘোষণা করা,
  2. বা ক্যোয়ারী নির্বাচনকারী পদ্ধতিটি ব্যবহার করে কোয়েরি অনুসারে প্রোগ্রামেটিক উপায়ে এইচটিএমএল উপাদানগুলির একটি তালিকা পাওয়া।

এখানে একটি উদাহরণ রয়েছে – আমরা যদি ডকুমেন্টে সমস্ত প্যারাগ্রাফ নীল রঙ করতে চাই, আমরা কেবল লিখতে পারি:

<style>
p {
    color: blue;
}
</style>
<p>I am blue</p>
<p class="example">I am also blue</p>
<p id="last" class="example">I am blue as well</p>

সিএসএস নির্বাচক “p” পেজে সমস্ত “p” (paragraph) নির্বাচন করবে।

আমরা কোয়েরিতে কনস্ট্রেইনসস যুক্ত করতে পারি এবং আরও নির্দিষ্ট সিলেক্টর ব্যবহার করে কিছু উপাদানগুলিতে আলাদা সিএসএস প্রয়োগ করতে পারি। আসুন সব “p” উপাদানগুলিকে সবুজ রঙ করুন যার “example” ক্লাস রয়েছে। মনে রাখবেন যে এই উদাহরণে, সিএসএস সংজ্ঞাগুলির ক্রমটি গুরুত্বপূর্ণ নয় যেহেতু দ্বিতীয় নির্বাচক আরও সুনির্দিষ্ট – তাই এটি কম নির্দিষ্ট সিএসএস সংজ্ঞাটিকে ওভাররাইড করবে।

<style>
p.example {
    color: green;
}

p {
    color: blue;
}    
</style>
<p>I am blue</p>
<p class="example">I am green now</p>
<p id="last" class="example">I am also green now</p>

আমরা একই প্রক্রিয়াটির পুনরাবৃত্তি করতে পারি তবে এবার ক্লাস সিলেক্টরের পরিবর্তে আইডি সিলেক্টর যুক্ত করব।

<style>
p#last {
    color: red;    
}

p.example {
    color: green;
}

p {
    color: blue;
}    
</style>
<p>I am blue</p>
<p class="example">I am green now</p>
<p id="last" class="example">And now I am red</p>

সিএসএস সিলেক্টরস বিভিন্ন উপাদানকে একই স্টাইলের ব্লক প্রয়োগ করার জন্য কমা ট্যাগকে সমর্থন করেন। এই উদাহরণটি h1, h2, এবং h3 নীল এবং h4, h5, এবং h6 এ লাল।

<style>
h1, h2, h3 {
    color: blue;
}

h4, h5, h6 {
    color: red;
}
</style>
<h1>h1 title</h1>
<h2>h2 title</h2>
<h3>h3 title</h3>
<h4>h4 title</h4>
<h5>h5 title</h5>
<h6>h6 title</h6>

ডিসেনডেন্ট এবং চাইল্ড সিলেক্টর

কোনও উপাদান টাইপ, একটি আইডি এবং / অথবা ক্লাসের নাম উল্লেখ করা ছাড়াও আমরা এমন নির্বাচকও তৈরি করতে পারি যা কেবলমাত্র নির্দিষ্ট শ্রেণিবদ্ধের মধ্যে থাকলে কেবলমাত্র একটি নির্দিষ্ট চাইল্ডকে বেছে নেয়। উদাহরণস্বরূপ, আসুন আমরা বলি যে আমরা যে কোনও অনুচ্ছেদে সমস্ত <strong> ট্যাগগুলিতে রঙিন করতে চাই যে “strongblue” ক্লাস রয়েছে।

<style>
.strongblue strong {
    color: blue;    
}
</style>
<p>This is the <strong>first</strong> sentence.</p>
<p class="strongblue">This is the <strong>second</strong> sentence.</p>

দুটি ধরণের চাইল্ড সিলেক্টর রয়েছে – এটির মতো একজন এনসেস্টর সিলেক্টর এবং সরাসরি বাছাই করা প্যারেন্ট উপাদান থেকে প্রথম স্তর নির্বাচন করেন। এখানে একই কোড তবে সরাসরি চাইল্ড সিলেক্টর সহ:

<style>
.strongblue > strong {
    color: blue;    
}
</style>
<p>This is the <strong>first</strong> sentence.</p>
<p class="strongblue">This is the <strong>second</strong> sentence.</p>

যদি <strong> উপাদান কোনও লিঙ্কের মধ্যেই আবদ্ধ হয়ে থাকে, তবে এই সিলেক্টরটি কাজ করবে না কারণ এটি .strongblue এবং strong উপাদানটির মধ্যে প্রত্যক্ষ parent-child সম্পর্কের উপর নির্ভর করে।

<style>
.strongblue > strong {
    color: blue;    
}
</style>
<p>This is the <strong>first</strong> sentence.</p>
<p class="strongblue">This is the <a><strong>second</strong></a> sentence.</p>

querySelector এবং querySelectorAll মেথডস:

HTML5 নতুন document.querySelector এবং document.querySelectorAll মেথড প্রবর্তন করেছে যা আমাদের একই সিলেক্টরগুলি পরিচালনা করতে এবং নির্বাচিতের সাথে সম্পর্কিত প্রথম উপাদান বা উপাদানগুলির একটি তালিকা প্রাপ্ত করার অনুমতি দেয়, আপনি যে মেথডটি ব্যবহার করেন তার উপর নির্ভর করে।

<p class="nice">This is a nice paragraph.</p>
<p class="nice">This is another nice paragraph.</p>
<p>This is a standard paragraph.</p>

<script>
    // this code colors the first nice paragraph in blue
    var firstNiceParagraph = document.querySelector(".nice");
    firstNiceParagraph.style.color = "blue";
</script>

Leave a Comment