المحدِّدات الحديثة: ‏:has و‏:is و‏:where و‏:nth-child المتقدم

استفد من الأصناف الزائفة الدالِّية الحديثة للتحديد بناءً على المحتوى، وجمّع المحدِّدات دون تضخيم الخصوصية، واستهدف الأنماط المعقدة.

9 دقيقة · 3 أسئلة

‏:is() و:where() كلاهما يجمّع المحدِّدات، لكنهما يتباعدان في نقطة حاسمة: الخصوصية. :is(nav, .menu, #main a) يأخذ خصوصية أقوى وسائطه (هنا المعرّف)، حتى لو كان nav هو المطابق. أما :where() فخصوصيته صفر، مهما كانت وسائطه. النتيجة العملية: :where() هو الأداة المثلى لإعادات الضبط والأنماط الافتراضية لنظام تصميم، إذ يستطيع أي محدِّد صنف بسيط تجاوزها بعد ذلك دون عناء.

:where(h1, h2, h3, h4) {
  margin-block: 0;
  line-height: 1.2;
}

:is(article, aside, section) :is(h2, h3) {
  font-family: var(--font-heading);
}

.prose :is(ul, ol) li + li {
  margin-top: 0.5em;
}

‏:has() يعكس أخيرًا اتجاه القراءة: يستهدف المحدِّد العنصر المضيف، لا ما يحتويه. .card:has(> img) يحدد البطاقة التي تملك صورة كطفل مباشر. وبدمجه مع الأصناف الزائفة للحالة، يتيح تدفق المعلومات إلى الأعلى دون JavaScript: تنسيق عنوان توضيحي عندما يكون حقله غير صالح، أو نموذج عندما يكون أحد حقوله في وضع التركيز، أو صف جدول عندما يكون مربع اختياره محددًا.

.field:has(input:invalid:not(:focus)) label {
  color: #dc2626;
}

.card:has(> img) {
  padding-top: 0;
}

tr:has(input[type="checkbox"]:checked) {
  background: #eef2ff;
}

بخصوص :nth-child()، مهارتان يجب ترسيخهما. أولًا، قراءة صيغ An+B: 2n (زوجي)، 2n+1 (فردي)، -n+3 (الثلاثة الأولى)، n+4 (من الرابع إلى النهاية)؛ والنطاق "من الثاني إلى الخامس" يُكتب بدمج :nth-child(n+2):nth-child(-n+5). ثانيًا، الصياغة الأحدث of S: :nth-child(2n of .visible) يعدّ فقط بين الأطفال المطابقين لـ .visible، بينما .visible:nth-child(2n) يعدّ كل الأطفال ثم يرشّح - نتيجتان مختلفتان تمامًا حالما تتداخل عناصر أخرى.

tr:nth-child(odd) {
  background: #fafafa;
}

li:nth-child(-n + 3) {
  font-weight: 600;
}

li:nth-child(n + 2):nth-child(-n + 5) {
  border-top: 1px solid #e5e7eb;
}

.row:nth-child(2n of .visible) {
  background: #eef2ff;
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ما خصوصية :where(#main, .nav, a)؟
   • خصوصية المعرّف، أي (1,0,0)
   • مجموع الوسائط الثلاثة
   • صفر، مهما كانت الوسائط
   • خصوصية الوسيط الذي يطابق فعليًا
2. ماذا يحدد .card:has(> img)؟
   • الصور التي هي أطفال مباشرون لبطاقة
   • البطاقات التي تحتوي على صورة كطفل مباشر
   • البطاقات الواقعة بعد صورة في الـ DOM
   • كل الصور التي هي أحفاد لبطاقات
3. في قائمة تحمل فيها بعض عناصر li فقط الصنف .visible، ماذا يفعل li:nth-child(2n of .visible)؟
   • يستهدف عناصر li الزوجية من القائمة التي تحمل أيضًا الصنف .visible
   • يستهدف عنصرًا بعد آخر من li، عادًّا عناصر li.visible فقط
   • يستهدف عناصر li الزوجية ثم يضيف إليها الصنف .visible