| المحدد الهيكلي | طريقة العمل والاستهداف | فائدته البرمجية |
|---|---|---|
| first-child أو last-child | يستهدف أول أو آخر عنصر مطلق بين أخواته | ممتاز لإزالة الهوامش من أول عنصر أو إضافة فاصل لآخر عنصر |
| first-of-type أو last-of-type | يستهدف أول أو آخر عنصر من نوع محدد بين أخواته | لتنسيق أول فقرة نصية داخل مقال دون التأثير على بقية الفقرات |
| nth-child | يستهدف العنصر رقم n ويقبل صيغ زوجية أو فردية | تلوين الأسطر الزوجية والفردية في الجداول بشكل تبادلي جذاب |
| nth-of-type | يستهدف العنصر رقم n لكن يحسب نفس النوع فقط | تلوين الصورة الثانية أو العنوان الثالث داخل الحاوية بدقة |
| only-child أو only-of-type | يستهدف العنصر إذا كان وحيداً بلا أخوة | تنسيق رسائل التنبيه الفريدة التي تظهر بمفردها داخل صندوق |
| not | يستهدف كل العناصر التي لا تطابق المحدد المكتوب | استثناء زر معين أو حقل معين من التنسيق العام المطبق |
| is | يجمع مجموعة محددات في محدد واحد ويرث أعلى خصوصية | اختصار كود التنسيق الطويل لعناصر متعددة وتجنب التكرار الممل |
| where | يجمع مجموعة محددات في محدد واحد لكن بخصوصية صفرية | يتيح كتابة تنسيقات افتراضية يسهل التعديل عليها وإعادة كتابتها لاحقاً |
| has | يستهدف العنصر الأب الذي يحتوي على ابن محدد بالداخل | التحكم في تنسيق الحاوية الكبرى بناءً على وجود عنصر معين داخلها |
هذه المجموعة من الفئات الزائفة تتيح استهداف العناصر بناءً على موقعها في شجرة HTML أو خصائصها الهيكلية.
**:first-child / :last-child** — أول أو آخر عنصر بين أخواته.
**:first-of-type / :last-of-type** — أول/آخر عنصر من نوعه بين أخواته.
**:nth-child(n)** — يستهدف العنصر رقم n. يقبل صيغ مثل odd وeven و2n+1.
**:nth-of-type(n)** — مثل :nth-child لكن يحسب فقط العناصر من نفس النوع.
**:only-child / :only-of-type** — عنصر وحيد بين أخواته.
**:not(selector)** — يستهدف كل العناصر التي لا تطابق المحدد.
**:is(sel1, sel2)** — مجموعة محددات في محدد واحد (يرث أعلى خصوصية).
**:where(sel1, sel2)** — مثل :is لكن بخصوصية صفرية.
**:has(selector)** — CSS الأب! يستهدف العنصر الذي يحتوي على العنصر المحدد.
| 1 | li:nth-child(odd) { background: #f8fafc; } |
| 2 | li:first-child { font-weight: bold; } |
| 3 | p:not(.intro) { color: #64748b; } |
| 4 | :is(h1, h2, h3) { font-family: 'Cairo', sans-serif; } |
| 5 | div:has(> img) { border: 2px solid #e2e8f0; } |
مثال 1: جدول مخططي (Striped Table)
| 1 | tr:nth-child(even) { background: #f1f5f9; } |
| 2 | tr:first-child { background: #1e293b; color: white; } |
| 3 | td:last-child { text-align: end; font-weight: 600; } |
مثال 2: استخدام :has لتنسيق الأب
| 1 | /* بطاقة تحتوي صورة تأخذ تنسيقاً مختلفاً */ |
| 2 | .card:has(img) { |
| 3 | padding: 0; |
| 4 | overflow: hidden; |
| 5 | } |
| 6 | |
| 7 | .card:has(img) .card-body { |
| 8 | padding: 16px; |
| 9 | } |
| 10 | |
| 11 | /* نموذج يحتوي حقلاً غير صالح */ |
| 12 | form:has(input:invalid) .submit-btn { |
| 13 | opacity: 0.5; |
| 14 | pointer-events: none; |
| 15 | } |