محدد الأشقاء العام

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

يختار محدد الأشقاء العام (~) جميع العناصر التي تعتبر أشقاء لعنصر محدد وتأتي بعده.

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

<div>
  <p>Paragraph 1</p>
  <h2>Heading</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

باستخدام CSS التالي:

h2 ~ p {
  color: blue;
}

بعد تطبيق CSS هذا، ستكون النتيجة:

تظل الفقرة 1 دون تغيير (فهي ليست عنصراً شقيقاً يأتي بعد h2)

تصبح الفقرة 2 باللون الأزرق (إنها عنصر شقيق يأتي بعد h2)
تصبح الفقرة 3 باللون الأزرق (إنها عنصر شقيق يأتي بعد h2)

اختبر نفسك

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

اختبر نفسك

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

التحدي

سهل

أنشئ قاعدة CSS باستخدام محدد الأشقاء العام لجعل جميع عناصر <p> التي تأتي بعد الـ <h1> تضيء باللون الوردي الساطع (#ff69b4).

ورقة مرجعية

يحدد محدد الأشقاء العام (~) جميع العناصر التي تعتبر أشقاء لعنصر محدد وتأتي بعده.

h2 ~ p {
  color: blue;
}

يحدد هذا جميع عناصر <p> التي تعتبر أشقاء لـ <h2> وتأتي بعدها في بنية HTML.

جرّب بنفسك

<html>
<head>
    <title>General Sibling Selector</title>
    <style>
        /* CSS solution goes here */

    </style>
</head>
<body>
    <h1>Welcome to the Party!</h1>
    <p>Grab a drink.</p>
    <p>Say hello to new friends.</p>
    <div>Dance floor area</div>
    <p>Take a selfie!</p>
    <p>Enjoy the snacks.</p>
</body>
</html>

اختبر نفسك

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