CSS উত্তরসূরী চিহ্নিতকারী

পরবর্তী প্রজন্ম সিলেক্টর (descendant selector) আবার বলা হয় অন্তর্ভুক্ত সিলেক্টর।

প্রবণকৃতকারী ভালোনির্বাচনকারী একটি এলিমেন্টের পরবর্তী যে কোনো এলিমেন্টকে বাছাই করতে পারে

কনটেক্স্ট অনুযায়ী এলিমেন্ট বাছাই করা

আমরা প্রবণকৃতকারী ভালোনির্বাচনকারীকে নির্দিষ্ট করতে পারি, যাতে এই নিয়মগুলি কিছু ডকুমেন্ট স্ট্রাকচারে কার্যকর হয় এবং অন্যান্য স্ট্রাকচারে কার্যকর না হয়

উদাহরণ হিসাবে, আপনি শুধুমাত্র h1 এলিমেন্টের em এলিমেন্টের ওপর শৈলী আরোপ করতে ইচ্ছুক হলে, এইভাবে লিখতে হবে:

h1 em {color:red;}

উপরোক্ত নিয়মটি, h1 এলিমেন্টের পরবর্তী যে কোনো em এলিমেন্টের লেখাটিকে লাল হিসাবে পরিবর্তন করবে। অন্যান্য em লেখা (যেমন, প্যারাগ্রাফ বা বক্তব্য তত্ত্বকৃতিতে) এই নিয়মটির অন্তর্ভুক্ত নয়:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

আপনার হাতে পরীক্ষা করুন

স্বাভাবিকভাবে, আপনি h1-তে পাওয়া যায় এমন প্রত্যেকটি em এলিমেন্টের ওপর একটি class অ্যাট্রিবিউট লাগাতেও পারেন, কিন্তু প্রবণকৃতকারী ভালোনির্বাচনকারীর দক্ষতা স্পষ্টভাবে উচ্চতর

ব্যাকরণ বিবরণ

প্রবণকৃতকারী ভালোনির্বাচনকারীতে, নিয়মের বামপাশের ভালোনির্বাচনকারীতে, দুইটি বা তার থেকেও বেশি ভালোনির্বাচনকারী সবসময় স্পেসের মাধ্যমে পৃথক করা হয়। ভালোনির্বাচনকারীগুলির মধ্যে স্পেস একটি কোম্পোনেন্টার (combinator)। প্রত্যেকটি কোম্পোনেন্টারকে ‘... যেখানে ... পাওয়া যায় ...’ ‘... ... এর অংশ হিসাবে ...’ ‘... ... এর পরবর্তী ...’ হিসাবে বোঝা যেতে পারে, কিন্তু ভালোনির্বাচনকারীকে ডান থেকে বাম দিকে পড়ার জন্য বাধ্যতামূলক

তারপর, h1 em ভালোনির্বাচনকারী একথা বোঝাতে পারে, “যে কোনো em যা h1 এলিমেন্টের পরবর্তী হয়েছে”। ভালোনির্বাচনকারীকে বাম থেকে ডান দিকে পড়ার জন্য, নিম্নলিখিত বর্ণনা ব্যবহার করা যেতে পারে: “যে কোনো em-কে ধারণকারী সকল h1-কে, এই শৈলীকে আন্দাজ করা হবে”

বিশেষ আপস

প্রবণকৃতকারী ভালোনির্বাচনকারীর কার্যকারিতা অত্যন্ত শক্তিশালী। এটির সাহায্যে, HTML-তে অসম্ভব কাজকর্মকেও সম্ভব করা যায়。

একটি ডকুমেন্টের জন্য ভাবুন যে, একটি সাইডবার এবং একটি মূল অঞ্চল রয়েছে। সাইডবারের পটভূমি নীল, মূল অঞ্চলের পটভূমি সাদা, উভয় অঞ্চলই লিঙ্ক তালিকা ধারণ করে। সমস্ত লিঙ্ককে নীল হিসাবে নির্দিষ্ট করা যায় না, কারণ তারপর সাইডবারের নীল লিঙ্কগুলি দেখানো যাবে না。

সমাধান হল প্রবণকৃতকারী ভালোনির্বাচনকারী ব্যবহার করা। এই ক্ষেত্রে, সাইডবার ধারণকারী div-কে sidebar ক্লাস অ্যাট্রিবিউট নির্দিষ্ট করা যেতে পারে, এবং মূল অঞ্চলের class অ্যাট্রিবিউট মেইনকনটেন্ট হিসাবে নির্দিষ্ট করা। তারপর নিম্নলিখিত শৈলী লিখতে হবে:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

উত্তরসূরী চিহ্নিতকারীর একটি অপসার্য দিক আছে, যেখানে দুই এলিমেন্টের মধ্যে স্তরের বিচ্ছেদ অনবরত হতে পারে।

উদাহরণ হিসাবে, ul em লিখলে, এই গঠনশৈলী উপরোক্ত ul এলিমেন্ট থেকে উত্তরসূরী সকল em এলিমেন্টকে বাছাই করবে, যেমন এমন কোনও নির্দিষ্ট স্তরের মধ্যে না থাকে।

তারপর, ul em উপরোক্ত ট্যাগের সকল em এলিমেন্টকে বাছাই করবে:

<ul>
  <li>তালিকাভুক্তি 1</li>
    <ol>
      <li>তালিকাভুক্তি 1-1</li>
      <li>তালিকাভুক্তি 1-2</li>
      <li>তালিকাভুক্তি 1-3</li>
        <ol>
          <li>তালিকাভুক্তি 1-3-1</li>
          <li>তালিকাভুক্তি</li> <em>1-3-2</em></li>
          <li>তালিকাভুক্তি 1-3-3</li>
        </ol>
      </li>
      <li>তালিকাভুক্তি 1-4</li>
    </ol>
  </li>
  <li>তালিকাভুক্তি 2</li>
  <li>তালিকাভুক্তি 3</li>
</ul>

আপনার হাতে পরীক্ষা করুন