انتخاب عناصر هم نیای مجاور در CSS

فرض کنید بخواهیم پاراگرافی که بلافاصله پس از یک عنوان(heading) قرار گرفته است را استایل دهی کنیم؛ یا یک مارجین خاص به یک لیست بدهیم که بلافاصله پس از یک پاراگراف قرار گرفته است. برای انتخاب یک عنصر که بلافاصله پس از یک عنصر دیگر قرار می گیرد و والد آنها یکسان هستند، می توانیم از علامت هم نیای مجاورِ + (بعلاوه) استفاده کنیم. هم نیا، به معنی خواهر و برابر است. ما می توانیم به دور این علامت، مانند علامت انتخاب عناصر فرزند(یعنی <) یک جفت فاصله سفید قرار دهیم؛ یا اینکه به صلاحدید نویسنده این کار را انجام ندهیم. برای حذف مارجین بالا(margin-top) از یک پاراگراف که بلافاصله پس از یک عنصر h1 قرار گرفته است، می توانیم به صورت زیر عمل کنیم:

h1 + p {margin-top: 0;}

این سلکتور به این معنی است: هر عنصر p که بلافاصله پس از یک عنصر h1 قرار می گیرد و والد آن با عنصر h1 یکسان است را انتخاب کن. برای مشاهده ی اینکه این سلکتور چگونه کار می کند، بهتر است یک درختچه از یک سند داشته باشیم. که د تصویر 2.20 نشان داده شده است:

(تصویر 2.20 : یک درختچه سند دیگر)

 در این درخت، یک جفت لیست، فرزند عنصر div هستند؛ یکی منظم است و دیگری نامنظم. و هریک از این لیست ها سه آیتم دارند. هر یک از این دو لیست با یکدیگر هم نیا یعنی خواهر یا برادر، و مجاور هستند. و آیتم های لیست ها نیز با یکدیگر مجاور و هم نیا هستند. اما، آیتم های لیستِ اول، (یعنی li های لیست اول) با آیتم های لیست دوم هم نیا نیستند. زیرا این دو مجموعه از آیتم های لیست ها، والد یکسانی ندارند.

به یاد داشته باشید که ما با یک علامت ترکیبی(combinator)، مثلاً علامت به اضافه(+)، تنها می توانیم از بین دو عنصر هم نیای مجاور، دومین عنصر (به بعد) را انتخاب کنیم.  بنابراین اگر از دستور زیر استفاده کنیم، تنها آیتم های دوم و سوم در هر لیست به صورت bold نشان داده می شوند:

li + li {font-weight: bold;}

 و آیتم های لیست اول دست نخورده باقی می مانند؛ همان طور که در تصویر 2.21 نشان داده شده است:

 (تصویر 2.21 : انتهاب عناصر هم نیای مجاور)

 برای اینکه CSS به درستی کار کند، نیاز دارد که این دو عنصر به ترتیبِ کد منبع(سورس کد) ظاهر شوند. در مثال ما، پس از تعریف یک عنصر ol، یک عنصر ul تعریف شده است. این به ما امکان می دهد تا دومین عنصر را با دستور ol + ul انتخاب کنیم، اما با استفاده از این قاعده ی نوشتاری(سینتکس) ما نمی توانیم اولین عنصر را انتخاب کنیم. برای اینکه دستور ul + ol تطابق یابد، باید یک لیست منظم بلافاصله پس از یک لیست نامنظم قرار گیرد. به یاد داشته باشید که محتوای متنی بین دو عنصر، از کار کردن علامت ترکیبیِ(combinator) هم نیا، یا همان خواهر یا برادری، جلوگیری نمی کند.

به قطعه کد زیر توجه کنید. نمایش درختی این کد، مانند تصویر 2.20 است:

<div>
  <ol>
    <li>List item 1</li>
    <li>List item 1</li>
    <li>List item 1</li>
  </ol>
  This is some text that is part of the 'div'.
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
    <li>Yet another list item</li>
  </ul>
</div>

 با اینکه یک متن بین دو لیست قرار دارد، ما هنوز هم می توانیم لیست دوم را با استفاده از سلکتور ol + ul انتخاب کنیم. علتش این است که متن مورد نظر، حاوی یک عنصر هم نیا نیست؛ اما به جای آن، بخشی از عنصر div والد است. اگر ما این متن را در داخل یک عنصر پاراگراف قرار می دادیم، از انتخاب لیست دوم با دستور ol + ul جلوگیری می کرد؛ و به جای آن، مجبور بودیم از دستوری مثل ol + p + ul استفاده کنیم. همان طور که مثال زیر نشان می دهد، این علامت ترکیبی هم نیای مجاور، می تواند همراه با دیگر علامت های ترکیبی(combinator) به کار رود:

html > body table + ul{margin-top: 1.5em;}

این سلکتور به این معنی است: هر عنصر ul که بلافاصله، پس از  یک عنصر table قرار دارد، و این جدول با ul هم نیا است(یعنی والد آنها یکسان است) که خود این table فرزند عنصر body است به طوری که این body  خودش فرزند مستقیم عنصر html است را انتخاب کن. و مارجین آنها را تنظیم کن.

مانند علامت های ترکیبی(combinators) ما می توانیم از علامت ترکیبی هم نیای مجاور، در یک دستور پیچیده تر مانند div#content h1 + div ol استفاده کنیم. این سلکتور به این معنی است: هر عنصر ol که در داخل یک عنصر div قرار دارد، به طوری که این div هم نیای مجاور یک h1 است؛ که خود این h1 در داخل یک div که آی دی آن مقدار content است را انتخاب کن.