محدد الشقيق المجاور (Adjacent sibling selector)

الدرس 9 من 15 في دورة محددات CSS على Coddy.

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

بناء الجملة (Syntax)

former_element + target_element {
  /* style properties */
}

لنفترض أن لدينا هيكل HTML التالي:

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

لتنسيق عنصر <span> الذي يلي الفقرة مباشرة، يمكنك استخدام محدد الشقيق المتجاور:

p + span {
   font-weight: bold;
}

في هذه الحالة، سيكون لـ "Adjacent span" وزن خط عريض (bold).

التحدي

سهل

أنشئ صفحة ويب تحتوي على عنصر p وعنصر span.
استخدم محدد الشقيق المجاور (adjacent sibling selector) لتنسيق عنصر span الذي يلي عنصر p مباشرة ليكون له إطار أحمر.

جرّب بنفسك

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</body>
</html>

جميع دروس محددات CSS

1مقدمة في محددات CSS

الغرض من محددات CSS لماذا هي مهمة؟

4محددات الخصائص

مقدمة في محددات الخصائص التواجد والقيم المطابقة محددات قيم الخصائص محددات قيم الخصائص 2 محددات قيم الخصائص 3

2المحددات البسيطة

محددات النوع محددات Class محددات ID المحددات العامة

3محددات الربط (Combinator Selectors)

محدد الابن (Child selector)محدد الأحفاد (Descendant selector)محدد الشقيق المجاور (Adjacent sibling selector)محدد الشقيق العام (General sibling selector)