محدد الأشقاء العام
جزء من قسم 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).
جرّب بنفسك
<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>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس CSS Mastery
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعة