أمران يزعجان كل من يصون CSS البطاقات في Waypoint. قواعد البطاقة مبعثرة: القاعدة الأساسية هنا، وحالة المرور بعدها بعشرين سطرًا، وتجاوز الوضع الداكن في ملف آخر. وفريق التصميم لا يتوقّف عن طلب أنماط تعتمد على ما داخل البطاقة («إن كانت الجلسة ممتلئة، اجعلها باهتة»)، وهذا كان يعني سابقًا تبديل class بـ JavaScript.
\nالـ nesting الأصلي (التداخل) يحلّ الأمر الأول، و:has() تحلّ الثاني.
تستطيع الآن أن تضع القواعد داخل القواعد، في CSS عادية، دون أيّ خطوة بناء:
\n.session-card {\n padding: 1rem;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n\n h2 {\n margin-block: 0 0.5rem;\n font-size: 1.125rem;\n }\n\n &:hover {\n border-color: #a78bfa;\n }\n\n .featured & {\n border-width: 2px;\n }\n\n @media (width >= 48rem) {\n padding: 1.5rem;\n }\n}& تمثّل الـ selector الأب. &:hover تعني «هذه البطاقة حين يمرّ المؤشّر فوقها»، و.featured & تعني «هذه البطاقة داخل .featured». والـ selector المتداخل بلا &، مثل h2، يُعامَل كعنصر داخلي: .session-card h2. وقواعد @media و@container المتداخلة تنطبق على الـ selector الأب، فيعيش تغيير الـ padding بجوار الـ padding نفسه.
يمكن أن تبدأ الـ selectors المتداخلة باسم عنصر (h2 لا & h2). كانت التطبيقات الأولى تشترط أن يأتي رمز أولًا؛ أما الآن فكل المتصفّحات الحالية تدعم الصيغة المرنة، والـ nesting ضمن Baseline منذ ديسمبر 2023 (ومتاح على نطاق واسع منذ منتصف 2026).
قاعدتان أخريان تحافظان على صحّة الـ nesting. في العمق، تتصرّف & كأنها :is() ملفوفة حول قائمة الأب، لذا فإن #keynote, .session-card { h2 { … } } تعطي كل قاعدة h2 متداخلة specificity بمستوى ID. وتوقّف عند مستويين من العمق: الـ selector الذي لا تستطيع قراءته بنظرة واحدة لن تستطيع تجاوزه بنظرة واحدة.
:has(): نسّق العنصر بحسب ما يحتويهتأخذ :has() selector نسبيًا وتطابق العنصر إن وجد ذلك الـ selector شيئًا:
/* A card that contains a speaker photo gets a two-column layout */\n.session-card:has(img) {\n display: grid;\n grid-template-columns: 64px 1fr;\n gap: 1rem;\n}\n\n/* Dim sold-out sessions */\n.session-card:has(.badge-full) {\n opacity: 0.6;\n}\n\n/* A label whose following input is invalid after the user typed */\nlabel:has(+ input:user-invalid) {\n color: #b91c1c;\n}المثال الأخير يُظهر أن :has() أكثر من مجرد «selector للعنصر الأب»: + input تنظر إلى الشقيق التالي، فيستطيع عنصر سابق أن يتفاعل مع عنصر لاحق. و:user-invalid هي القريبة المهذّبة لـ :invalid؛ فهي لا تطابق إلا بعد أن يتفاعل المستخدم مع الحقل، فلا يُحمَّل نموذج فارغ مغطّى بالأحمر.
لـ :has() حدّان يستحقّان المعرفة قبل أن تصطدم بهما. لا يمكنك وضع :has() داخل :has() أخرى، ولا وضع pseudo-elements مثل ::before بداخلها. والـ specificity الخاصة بها تتبع قاعدة :is() التي رأيناها سابقًا في هذا القسم: أدقّ وسيط هو الذي يُحسب، لذا فإن .session-card:has(#keynote-badge) تحمل وزن ID.
هنا تغيّر :has() طريقة بنائك للأشياء. شريط الفلاتر في Waypoint مجموعة من مربّعات الاختيار. ولأن مربّعات الاختيار والبطاقات تشترك في سلف واحد هو .schedule، تستطيع حالة مربّع الاختيار أن تقود البطاقات:
<section class=\"schedule\">\n <div class=\"filters\">\n <label><input type=\"checkbox\" id=\"hide-full\"> Hide sold-out</label>\n </div>\n <article class=\"session-card\">…<span class=\"badge-full\">Sold out</span></article>\n <article class=\"session-card\">…</article>\n</section>.schedule:has(#hide-full:checked) .session-card:has(.badge-full) {\n display: none;\n}اقرأها من اليمين إلى اليسار: أخفِ البطاقة التي تحتوي على شارة «ممتلئة»، حين تكون داخل جدول يحتوي على مربّع #hide-full مُفعَّل. ويعيد المتصفّح تقييمها لحظة تغيّر مربّع الاختيار.
تحظى :has() بالاهتمام، لكن بضعة selectors أهدأ تستحق مكانها في صفحة Waypoint أيضًا:
/* Highlight the whole filter bar while any control inside it has focus */\n.filters:focus-within { outline: 2px solid #a78bfa; }\n\n/* Every card except sold-out and cancelled ones */\n.session-card:not(.is-full, .is-cancelled) { cursor: pointer; }\n\n/* Stripe only the visible cards, skipping hidden ones */\n.session-card:nth-child(even of :not([hidden])) { background: #f9fafb; }:focus-within تطابق العنصر حين يكون عليه أو على أيّ شيء بداخله الـ focus. و:not() تقبل قائمة كاملة، فلم تعد تحتاج إلى سلسلة :not(.a):not(.b). وصيغة of S في :nth-child() لا تعدّ إلا الأشقّاء المطابقين لـ S، وهذا يصلح التلوين المتناوب للصفوف الذي ينكسر لحظة يخفي الفلتر أحدها. والثلاثة تعمل في كل المتصفّحات الحالية.
في التمرين ستعيد كتابة أنماط البطاقة بالـ nesting، ثم تضيف قاعدتين بـ :has(): واحدة تخفي الجلسات الممتلئة حين يُفعَّل مربّع الفلتر، وأخرى تُبرز البطاقة حين يُفعَّل مربّع «الحفظ» فيها. وبهذا يكتمل قسم الـ cascade؛ وبعده ستنتقل من أيّ الأنماط ينطبق إلى أين تذهب الأشياء، بدءًا بـ flexbox.
& تمثّل الـ selector الأب.","الـ selector المتداخل يأخذ specificity :is() مطبّقةً على قائمة الأب، لذا إن احتوت قائمة الأب على ID أصبحت كل قاعدة متداخلة ثقيلة بوزن ID.","الـ nesting في CSS لا يلصق السلاسل النصية كما يفعل Sass، لذا لن تُنتج &__title أبدًا .card__title.",":has() تطابق العنصر حين يطابق الـ selector النسبي داخلها، ما يتيح لعنصر أب، أو لعنصر شقيق سابق، أن يتفاعل مع أبنائه أو مع أشقّائه اللاحقين."],"further":[{"title":"Using CSS nesting (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Using"},{"title":":has() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has"},{"title":"Nesting (web.dev Learn CSS)","url":"https://web.dev/learn/css/nesting"}],"quiz":[{"q":"ما الـ selector الذي تُنتجه هذه القاعدة المتداخلة؟
\n.session-card {\n .speaker & { padding: 0; }\n}.session-card .speaker","why":"هذا ما ستحصل عليه دون &، أو مع & .speaker. هنا تأتي & في النهاية، فتكون البطاقة هي العنصر المتداخل."},{"text":".speaker .session-card","why":"صحيح. & تحدّد موضع الـ selector الأب؛ ووضعها في النهاية يعني بطاقة جلسة داخل .speaker."},{"text":".session-card.speaker","why":"هذا يتطلّب &.speaker دون مسافة بينهما."},{"text":"غير صالح، لأن & يجب أن تأتي أولًا.","why":"يمكن أن تظهر & في أيّ موضع من الـ selector المتداخل، بما في ذلك نهايته."}],"answer":1},{"q":"أيّ selector ينسّق بطاقة الجلسة فقط حين تحتوي على صورة؟
","options":[{"text":".session-card img","why":"هذا يحدّد الصورة نفسها، لا البطاقة."},{"text":".session-card > img:parent","why":"لا توجد pseudo-class اسمها :parent في CSS؛ :has() هي طريقة التحديد بحسب العناصر الداخلية."},{"text":".session-card:has(img)","why":"صحيح. تطابق البطاقة حين يجد الـ selector النسبي img عنصرًا بداخلها."}],"answer":2},{"q":"أيّ قاعدة تخفي كل بطاقة ليست من مسار design حين يُفعَّل مربّع الاختيار #only-design الموجود داخل .schedule؟
.schedule:has(#only-design:checked) .session-card:not(.track-design) { display: none; }","why":"صحيح. :has() تحوّل حالة مربّع الاختيار إلى شرط على السلف المشترك، وبقية الـ selector تستهدف البطاقات."},{"text":"#only-design:checked .session-card:not(.track-design) { display: none; }","why":"هذا يبحث عن بطاقات داخل مربّع الاختيار، وعناصر input لا يمكن أن يكون لها أبناء."},{"text":"#only-design:checked + .session-card:not(.track-design) { display: none; }","why":"الرابط + لا يصل إلا إلى الشقيق الوحيد الذي يلي مربّع الاختيار مباشرةً، لا إلى البطاقات في مواضع أخرى من الجدول."}],"answer":0},{"q":"كتبت .card { &__title { font-weight: 700; } } بحكم العادة من Sass. ماذا يحدث؟
card__title.","why":"الـ nesting الأصلي لا يلصق السلاسل النصية؛ & تمثّل selector، لا نصًا يُلصق به شيء."},{"text":"لا تنسّق .card__title؛ فالـ selector المتداخل لا يعني ما يعنيه في Sass.","why":"صحيح. لتنسيق عنصر BEM بالـ nesting الأصلي تكتب الـ class كاملًا، مثل .card__title في المستوى الأعلى."},{"text":"يتوقّف المتصفّح عن تحليل بقية ملف الأنماط.","why":"معالجة الأخطاء في CSS تُسقط ما لا تستطيع استخدامه وتكمل؛ ولا تتخلّى عن ملف الأنماط أبدًا."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"ثلاث مهام، كلها في CSS:
\n.session-card الثلاث (الأساسية وh2 و:hover) على شكل قاعدة متداخلة واحدة على .session-card.#hide-full، أخفِ (display: none) كل .session-card تحتوي على .badge-full..save في بطاقة ما، أعطِ تلك البطاقة لون حدّ #6d28d9.لا تضف JavaScript ولا تغيّر الـ HTML.
\n","hints":["داخل قاعدة.session-card، تحلّ h2 { … } و&:hover { … } محلّ القاعدتين المنفصلتين.","للفلتر، ابدأ من السلف الذي يحتوي على مربّع الاختيار والبطاقات معًا: .schedule:has(#hide-full:checked).",".schedule:has(#hide-full:checked) .session-card:has(.badge-full) { display: none; }، وداخل البطاقة متداخلةً: &:has(.save:checked) { border-color: #6d28d9; }."],"explanation":"الـ nesting يُبقي كل حالات البطاقة في كتلة واحدة: تصبح h2 قاعدة لعنصر داخلي، وتُلحق &:hover الـ pseudo-class بالبطاقة نفسها. ويعمل الفلتر لأن .schedule تحتوي على مربّع الاختيار والبطاقات معًا: :has(#hide-full:checked) تحوّل حالة مربّع الاختيار إلى شرط على ذلك السلف المشترك، و.session-card:has(.badge-full) تنتقي البطاقات الممتلئة. وإبراز الحفظ هو الفكرة نفسها بمستوى أدنى: تطابق البطاقة :has(.save:checked) لحظة تفعيل مربّعها، ويعيد المتصفّح تقييم القاعدتين عند كل تغيير، دون JavaScript.