CSS সম্পর্কিত ভাই চিহ্নিতকারী

পারস্পরিক ভাই যোগাযোগকারী সিলেক্টর (Adjacent sibling selector) পারস্পরিক ভাই যোগাযোগকারীর পরে আসা ইলেকট্রনকে চিহ্নিত করতে পারে, এবং তারা একই পিতৃপিতা ইলেকট্রন রয়েছে。

পারস্পরিক ভাই যোগাযোগকারী চিহ্ন চিহ্নিত করুন

যদি আর্কা ইলেকট্রন পরে আসা ইলেকট্রনকে চিহ্নিত করতে হয় এবং তারা একই পিতৃপিতা ইলেকট্রন রয়েছে, তবে পারস্পরিক ভাই যোগাযোগকারী সিলেক্টর (Adjacent sibling selector) ব্যবহার করা যায়。

উদাহরণস্বরূপ, h1 ইলেকট্রন পরে আসা প্যারাগ্রাফটির উপরের মার্গ সম্প্রসারণ করতে, এইভাবে লিখা যায়:

h1 + p {margin-top:50px;}

এই সিলেক্টরটি এইভাবে পড়া যায়: “h1 ইলেকট্রন পরে আসা প্যারাগ্রাফটি চিহ্নিত করুন যা একই মাত্র প্রথম প্রবন্ধ এবং p ইলেকট্রনকে সম্মিলিত পিতৃপিতা ইলেকট্রন রয়েছে”

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

গঠনশৈলী ব্যাখ্যা

পারস্পরিক ভাই যোগাযোগকারী সিলেক্টর (Adjacent sibling combinator) ব্যবহার করে পারস্পরিক ভাই যোগাযোগকারী চিহ্ন (plus sign) (+) করা হয়。

মন্তব্য:সাবড়াকোড নিবন্ধকারীর মতো, পারস্পরিক ভাই যোগাযোগকারীর পাশে শুধুমাত্র প্রকাশনা স্পেস থাকতে পারে。

এখানে নিচের ডকুমেন্ট ট্রি ফ্রেমেণ্টটি দেখুন:

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

মনে রাখুন যে, একটি সংযোজকটি শুধুমাত্র দুই সম্পর্কিত ভাইকেই চিহ্নিত করতে পারে।দৃশ্যতে দেখুন নিচের চিহ্নিতকারীটি:

li + li {font-weight:bold;}

উপরোক্ত চিহ্নিতকারীটি শুধুমাত্র তালিকার দ্বিতীয় ও তৃতীয় তালিকাবস্তুকে বোল্ড করবে।প্রথম তালিকাবস্তুটি প্রভাবিত না হবে。

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

অন্য চিহ্নিতকারীগুলোর সঙ্গে সংযোজন

সম্পর্কিত ভাই সংযোজকটি অন্য সংযোজকগুলোকেও সংযুক্ত করতে পারে:

html > body table + ul {margin-top:20px;}

এই চিহ্নিতকারীটি বর্ণনা করা হয়েছে: table এলিমেন্টের পরে বিদ্যমান সকল ul এলিমেন্টকে চিহ্নিত করা হয়, যেগুলো body এলিমেন্টের মধ্যে অবস্থিত এবং body এলিমেন্টটি হলো html এলিমেন্টের সাব-এলিমেন্ট。