تصميم عناصر متداخلة من الأبناء عبر أصول متعددة

البحث عن حل لتصميم عناصر متداخلة محددة ضمن هياكل أصل مختلفة، ضع في الاعتبار العلامات التالية :

• one
• two

• three

• four

الهدف هو تطبيق الأنماط على "واحد" و"ثلاثة"، بغض النظر عما إذا كانوا الأطفال الأوائل أم لا من كل

.

حدود :nth-child()

محاولات استخدام :nth-child() تفشل لأنها تنطبق فقط على العناصر التي مشاركة نفس الوالد. في هذا السيناريو، محدد CSS .foo li:nth-child(1), .foo li:nth-child(3) سوف يستهدف فقط الأطفال الأوائل لكل

.

بديل الحلول

JavaScript:

يتيح لك استخدام مكتبة مثل jQuery تحديد العناصر باستخدام إمكانات التصفية القوية لـ JavaScript. على سبيل المثال، سيستهدف البرنامج النصي التالي عنصري
• الأول والثالث داخل حاوية .foo:

  $('.foo li:eq(0), .foo li:eq(2)')

  تمييز العناصر الصريحة:

  يمكنك وضع علامة واضحة على العناصر المطلوبة باستخدام الفئات أو المعرفات لتمكين تحديدها عبر CSS. على سبيل المثال، إضافة فئات إلى عنصري
• الأول والثالث:

• one
• two


• ثلاثة

• أربعة

.foo .first,
.فو .الثالث {
    اللون: أحمر؛