تصميم محدد للأطفال عبر آباء متعددين

عند تصميم العناصر المتداخلة باستخدام محدد الطفل n، من المهم ملاحظة أن المحدد يعمل ضمن سياق الوالد الوحيد. يمكن أن يؤدي هذا إلى تحديات عند استهداف عناصر فرعية محددة عبر آباء متعددين.

المشكلة:

ضع في اعتبارك الترميز التالي:

    
one
        
two
    
three
    
four
    

الهدف هو تصميم عنصري li الأول والثالث داخل .foo. باستخدام CSS التالي:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

لن ينجح هذا الأسلوب لأن nth-child يختار الطفل الأول والثالث من كل ul.

الحل:

استخدام CSS وحده، لا يمكن استهداف الأطفال عبر آباء متعددين. ومع ذلك، هناك حلول بديلة:

• JavaScript: مكتبات مثل jQuery تسهل التعامل مع عناصر DOM واختيار عناصر محددة، مثل $('.foo li:eq( 0)، .foo li:eq(2)').
• العلامات الصريحة: إضافة فئات أو معرفات إلى الأول والثالث عناصر li بشكل صريح، مثل:

    
one
        
two
    
three
    
four
    

ثم قم بتصميمها باستخدام الفئات المضافة حديثًا:

.foo li.first,
.foo li.third
{
    color: red;
}