مختارات الأخوة القريبة CSS

يمكن للخيار القريب من الأشقاء اختيار العنصر الذي يلي عنصر آخر، إذا كان لديهما نفس العنصر الأم.

اختيار الأشقاء

إذا كنت بحاجة إلى اختيار عنصر يلي عنصر آخر، ولهما نفس العنصر الأم، يمكنك استخدام اختيار القريب من الأشقاء (Adjacent sibling selector).

على سبيل المثال، إذا كنت ترغب في زيادة الهوامش العلوية للفقرة التي تلي عنصر h1، يمكنك كتابة:

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

يقرأ هذا المزيج مثل: "اختر الفقرة التي تلي عنصر h1، حيث أن h1 و p يمتلكان نفس العنصر الأم".

جرب بنفسك

توضيح الجملة

استخدمت اختيار القريب من الأشقاء علامة (+)، وهي علامة التواصل مع الأشقاء (Adjacent sibling combinator).

التعليقات:مثل علامة التواصل مع الأبناء، يمكن أن تكون هناك مسافات بيضاء بجانب علامة التواصل مع الأشقاء.

انظروا إلى هذا الجزء من شجرة الوثيقة أدناه:

<div>
  <ul>
    <li>قائمة العنصر 1</li>
    <li>قائمة العنصر 2</li>
    <li>قائمة العنصر 3</li>
  </ul>
  <ol>
    <li>قائمة العنصر 1</li>
    <li>قائمة العنصر 2</li>
    <li>قائمة العنصر 3</li>
  </ol>
</div>

في هذا الجزء، يحتوي العنصر div على قائمتين: قائمة غير مرتبة وقائمة مرتبة، كل قائمة تحتوي على ثلاثة عناصر قائمة. هذه القائمتان هي أخوة قريبة، والعناصر القائمة نفسها هي أخوة قريبة. ومع ذلك، ليست العناصر القائمة من القائمة الأولى والعناصر القائمة من القائمة الثانية أخوة قريبة، لأن هذه المجموعتين من العناصر القائمة لا تنتمي إلى نفس العنصر الأب (يمكن أن تُعتبر أخوة قريبة فقط).

تذكر أن علامة التبويب يمكنها اختيار العنصر الثاني فقط من الأخوة القريبة. انظر إلى المختار التالي:

li + li {font-weight:bold;}

سيختار هذا المختار فقط العنصرين الثاني والثالث من القائمة، العنصر الأول غير مؤثر.

جرب بنفسك

ربط مع مختارات أخرى

يمكن للواحد من علامات التبويب أن يربط مع علامات أخرى:

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

يُفسر هذا المختار كالتالي: يُختار جميع العناصر ul التي تتبع العنصر table، والذي يحتوي على العنصر body، والذي هو عنصر فرعي لعنصر html.