تنسيق عنصر الأب بناءً على فئة الطفل النشطة في CSS

عند بناء واجهات الويب، قد تواجه حالات تحتاج فيها إلى تنسيق عنصر الأب بناءً على فئة عنصر الطفل. واحدة من الحالات الشائعة تتعلق بالقوائم التي يتم إنشاؤها بواسطة المكونات الإضافية، حيث ترغب في تسليط الضوء على عنصر القائمة النشط من خلال تنسيق عنصر القائمة الأب. سيوجهك هذا المقال لفهم هذه المشكلة وتقديم حلول ممكنة، وخاصة باستخدام محددات CSS.

فهم المشكلة

تخيل أن لديك هيكل HTML مثل هذا لقائمتك:

<ul class="menu">  
    <li>  
        <a class="active">الصفحة النشطة</a>  
    </li>  
    <li>    
        <a>صفحة أخرى</a>  
    </li>  
</ul>  

في هذا المثال:

• عنصر <a> الخاص بـ “الصفحة النشطة” يحتوي على الفئة active، مما يدل على أنها الصفحة النشطة حاليًا.
• ترغب في تطبيق تنسيق على عنصر <li> الأب للارتباط بفئة active، ولكن ليس لديك السيطرة على الشيفرة التي تم إنشاؤها بواسطة المكون الإضافي للقائمة.

تحدي محددات CSS

للأسف، لم يكن من الممكن تطبيق الأنماط مباشرة على عنصر الأب بناءً على خصائص أو فئات عناصر الطفل حتى تم تقديم :has(). إليك ما تحتاج معرفته:

القيود الحالية لـ CSS

• محددات CSS: تقليديًا، لا تسمح لك محددات CSS باختيار عنصر الأب استنادًا إلى فئات أطفاله. تعني هذه القيود أنه إذا كنت ترغب في تنسيق والد استنادًا إلى خصائص الطفل، فلا يمكن لـ CSS تحقيق ذلك مباشرة.

الحل في CSS: الفئة الزائفة :has()

مع ظهور الفئة الزائفة :has() في CSS، أصبح هناك الآن طريقة لتنسيق عنصر الأب بناءً على فئة طفله، على الرغم من أنها قد لا تكون مدعومة بعد في جميع المتصفحات. الصياغة هي كما يلي:

li:has(a.active) {
    /* أنماطك هنا */
}

ستقوم هذه المحددة باختيار أي <li> يحتوي على <a> مع الفئة active، مما يتيح لك تطبيق الأنماط المرغوبة مباشرة على عناصر <li>. لكن، انتبه إلى توافق المتصفحات حيث أن ليس جميع المتصفحات تدعم حاليًا :has().

الحل البديل: JavaScript

إذا كانت دعم المتصفحات لمحدد :has() تشكل مصدر قلق أو كنت بحاجة إلى وظائف إضافية، يمكنك دائمًا استخدام JavaScript. إليك كيفية تحقيق نفس النتيجة باستخدام JavaScript (أو jQuery):

استخدام JavaScript العادي

يمكنك استخدام الشيفرة البرمجية JavaScript التالية للعثور على والد الارتباط النشط وتطبيق الأنماط حسب الحاجة:

document.getElementsByClassName("active")[0].parentNode.style.backgroundColor = "yellow"; // مثال على التنسيق

استخدام jQuery

إذا كنت تفضل استخدام jQuery، يمكنك تحقيق نفس الشيء بأسلوب أبسط:

$('.active').parent().css('background-color', 'yellow'); // مثال على التنسيق

تتيح لك هذه الطريقة تطبيق الأنماط بشكل ديناميكي استنادًا إلى الفئات الموجودة دون إجراء تغييرات على هيكل HTML.

الخاتمة

بينما لدى CSS قيود عند اختيار عناصر الأب بناءً على فئات الأطفال، إلا أن التقنيات باستخدام الفئة الزائفة :has() تقدم حلاً حديثًا، بشرط أن يكون دعم المتصفح كافيًا. بدلاً من ذلك، يبقى JavaScript طريقة قوية لتنسيق عناصر الأب ديناميكيًا استنادًا إلى الأطفال النشطين. من خلال استخدام هذه التقنيات، يمكنك تعزيز تصميم الويب الخاص بك مع الحفاظ على كود فعال ومنظم.

باستخدام هذه الحيل، يمكنك الحفاظ على تنفيذات القائمة الخاصة بك نظيفة وأنيقة دون الحاجة إلى تغيير هيكل HTML الموجود أو الفئات التي تم إنشاؤها بواسطة المكونات الإضافية. برمجة سعيدة!