محدد الأشقاء المتجاورين

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 4 من 43.

يُستخدم محدد الشقيق المجاور (+) لتنسيق عنصر يأتي مباشرة بعد عنصر محدد. يجب أن يكون لكليهما نفس العنصر الأب، وكلمة "مجاور" تعني "بجانب بعضهما البعض مباشرة".

على سبيل المثال:

<h2>Heading</h2>
<p>This paragraph is styled</p>

باستخدام CSS هذا:

h2 + p {
  font-weight: bold;
}

تم تنسيق الفقرة لأنها تتبع عنصر h2 مباشرةً.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

التحدي

سهل

قم بإنشاء محدد CSS يستهدف فقط الفقرات (<p>) التي تلي مباشرة عنصر <h2> يصف مباراة كرة سلة. قم بتنسيق هذه الفقرات بـ لون خط blue و حجم خط 18px.

ورقة مرجعية

يقوم محدد الشقيق المجاور (+) بتنسيق عنصر يأتي مباشرة بعد عنصر محدد. يجب أن يكون لكلا العنصرين نفس الأب.

الصيغة:

element1 + element2 {
  /* التنسيقات */
}

مثال:

h2 + p {
  font-weight: bold;
}

يستهدف هذا الفقرات التي تلي عنصر h2 مباشرة.

جرّب بنفسك

<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <h2>Basketball Game Overview</h2>
    <p>The basketball game was an exciting match between the **Los Angeles Lakers** and the **Golden State Warriors**, featuring intense offense and solid defense from both teams.</p>
    
    <p>During the first half, the Lakers held a slight lead, with LeBron James making key plays, while Stephen Curry of the Warriors kept the game tight with impressive three-pointers.</p>
    
    <p>This paragraph is not directly after an h2, so it should not be affected.</p>
    
    <p>In the second half, the Warriors fought back, with Klay Thompson hitting critical shots, but the Lakers secured their win with solid defense and a game-winning dunk by Anthony Davis.</p>
</body>
</html>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.