| المحدد | طريقة الكتابة في الكود | الوظيفة والاستهداف | الفائدة البرمجية |
|---|---|---|---|
| محدد السلالة Descendant | مسافة فارغة بين المحددين A B | يستهدف كل عناصر B الموجودة داخل A بغض النظر عن عمقها أو مكانها بالداخل | تنسيق عناصر معينة مدمجة داخل حاوية محددة دون التأثير على بقية الموقع |
| محدد الابن المباشر Child | علامة الابن المباشر بين المحددين A Child B | يستهدف عناصر B التي تعتبر ابناً مباشراً من الجيل الأول للعنصر A فقط | التحكم الدقيق في العناصر الفرعية المباشرة للحاوية دون النزول للأحفاد |
| محدد الأخ المجاور Adjacent Sibling | علامة الزائد بين المحددين A + B | يستهدف العنصر B الأول الذي يأتي مباشرة بعد العنصر A بشرط أن يكونا في نفس المستوى | ممتاز لتنسيق أول عنصر يتبع عنواناً معين أو فصل العناصر المتتالية |
| محدد الأخوة العامة General Sibling | علامة التقريب بين المحددين A ~ B | يستهدف كل عناصر B التي تأتي بعد العنصر A وتشاركه نفس الأب في نفس المستوى | مفيد جداً لتنسيق قائمة عناصر كاملة تتأثر بوجود عنصر معين قبلها |
المحددات العلائقية تتيح لك استهداف العناصر بناءً على موقعها داخل شجرة HTML. هناك أربعة أنواع:
**١. محدد السلالة (Descendant — مسافة فارغة)** `A B` — يستهدف كل عناصر B داخل A بأي عمق.
**٢. محدد الابن المباشر (Child — >)** `A > B` — يستهدف عناصر B الأبناء المباشرون فقط لـ A.
**٣. محدد الأخ المجاور (Adjacent Sibling — +)** `A + B` — يستهدف العنصر B الذي يأتي مباشرةً بعد A.
**٤. محدد الأخوة العامة (General Sibling — ~)** `A ~ B` — يستهدف كل عناصر B التي تأتي بعد A في نفس المستوى.
هذه المحددات قوية جداً لأنها تتيح تنسيق العناصر بناءً على سياقها دون الحاجة لإضافة classes إضافية.
| 1 | /* سلالة */ |
| 2 | nav a { color: white; } |
| 3 | |
| 4 | /* ابن مباشر */ |
| 5 | ul > li { list-style: disc; } |
| 6 | |
| 7 | /* أخ مجاور */ |
| 8 | h2 + p { margin-top: 0; } |
| 9 | |
| 10 | /* أخوة عامة */ |
| 11 | h2 ~ p { color: #555; } |
مثال 1: مثال: تنسيق قائمة متداخلة
| 1 | /* كل روابط nav */ |
| 2 | nav a { text-decoration: none; color: #1d4ed8; } |
| 3 | |
| 4 | /* li المباشرون في القائمة الرئيسية فقط */ |
| 5 | .menu > li { display: inline-block; margin: 0 8px; } |
| 6 | |
| 7 | /* الفقرة التالية لكل عنوان h3 مباشرة */ |
| 8 | h3 + p { font-weight: 600; color: #0f172a; } |
| 9 | |
| 10 | /* كل الفقرات الأخوات بعد أول h2 */ |
| 11 | h2 ~ p { line-height: 1.8; } |