الفئة الزائفة العلاقية :has()

يحدد الصنف الزائف :has() عنصرًا إذا كان يحتوي على عنصر سليل يطابق الوسيط. ويُسمى غالبًا «محدد العنصر الأصل»، إذ يتيح تنسيق العنصر الأصل استنادًا إلى عناصره السليلة، وهي قدرة لم تكن CSS تمتلكها من قبل.

يحدد .card:has(img) أي عنصر .card يحتوي على عنصر سليل من نوع img. والوسيط عبارة عن قائمة محددات نسبية، أي أي محدد CSS صالح يصف عناصر بالنسبة إلى العنصر موضوع التحديد.

نسّقوا حاوية نموذج عندما تحتوي على إدخال غير صالح: form:has(:invalid) { border-color: red; }. ونسّقوا قسمًا يحتوي على عنوان: section:has(h2) { padding-top: 2rem; }. يتغير مظهر العنصر الأصل استنادًا إلى حالة العنصر السليل.

يمكن لـ :has() تحديد العناصر الشقيقة السابقة، وهو أمر لا يستطيع + و~ فعله. يحدد h2:has(+ p) عناصر h2 التي يتبعها عنصر p مباشرةً. ويحدد li:has(~ .active) عناصر li التي لها عنصر شقيق لاحق يحمل الصنف .active.

تفاعلوا مع صلاحية النموذج الأصلية من دون JavaScript: ينسّق input:has(~ .error-msg) حقل إدخال له رسالة خطأ شقيقة. وينسّق label:has(+ input:required) التسميات التي يكون حقل الإدخال المرتبط بها مطلوبًا، وكل ذلك باستخدام CSS وحدها.

أبرزوا حاويات التنقل استنادًا إلى العنصر السليل النشط: يطبق nav:has(.active) التنسيقات على عنصر nav بأكمله عندما يحمل أي عنصر سليل الصنف active. وهذا مفيد للإشارة إلى قسم التنقل الحالي على مستوى الحاوية.

ينسّق .grid:has(.card:focus-within) الشبكة بأكملها عندما تتلقى أي بطاقة تركيزًا من لوحة المفاتيح. ويحافظ .dropdown:has(:hover) على بقاء القائمة المنسدلة مفتوحة أثناء تمرير المؤشر فوق أي عنصر سليل، وهو أوضح من سلاسل معاملات الأشقاء المعقدة.

يطبق .sidebar:has(nav) تخطيطًا مختلفًا عن .sidebar:not(:has(nav)). يتيح ذلك تخطيطًا شرطيًا من دون JavaScript؛ إذ يقود وجود عناصر سليلة محددة أو غيابها تخطيط العنصر الأصل، ما يتيح CSS متكيفة فعلًا وواعية بالمحتوى.

قد يكون استخدام :has() مع محددات وسيط عامة (مثل :has(*)) مكلفًا؛ إذ يجب على المتصفح فحص كل عنصر. اجعلوا وسائط :has() محددة. وفضّلوا :has(> .specific-child) (عنصر سليل مباشر) على :has(.specific-child) (أي عنصر سليل) متى أمكن.

يتوفر دعم :has() في Chrome 105+ وSafari 15.4+ وFirefox 121+، مع دعم كامل ضمن خط الأساس منذ أواخر 2023. لا يوجد polyfill لهذه الميزة (لأنه سيتطلب محاكاة باستخدام JavaScript)، لذا استخدموها مع التحسين التدريجي في المتصفحات الأقدم عندما لا تكون الميزة ضرورية.

كانت الأنماط التالية تتطلب سابقًا مستمعات أحداث في JS: «إضافة صنف إلى العنصر الأصل عند تركيز العنصر السليل»، و«إظهار طبقة تراكب عند وجود مشغل نافذة منبثقة»، و«تنسيق شبكة بطريقة مختلفة عندما تحتوي على ثلاثة عناصر بالضبط». يتولى :has() جميع هذه الحالات بطريقة تصريحية.

ما الذي يجعل :has() فريدًا مقارنةً بمعاملات CSS الموجودة مثل + و~؟

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