المحدد للعنصر CSS

على عكس ملاكمة العناصر الفرعية (Child selectors)، يمكن لملاكمة العناصر الفرعية فقط اختيار العناصر التي تكون عناصر فرعية لعنصر معين.

اختيار العناصر الفرعية

إذا كنت لا ترغب في اختيار أي عنصر فرعي عشوائي، بل ترغب في تحديد نطاق أضيق، فإنك يجب أن تستخدم ملاكمة العناصر الفرعية (Child selector).

على سبيل المثال، إذا كنت ترغب في اختيار العناصر الثنائية التي تكون فقط عنصرًا فرعيًا لـ h1، يمكنك كتابة ما يلي:

h1 > strong {color:red;}

هذه القاعدة ستجعل العناصر الثنائية التالية لـ h1 تصبح باللون الأحمر، ولكن العناصر الثنائية في h1 الثاني لن تتأثر:

<h1>هذا <strong>مهم</strong> <strong>مهم</strong> جداً.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

تجربة شخصية

توضيح الجملة

يجب أن تكون قد لاحظتم أن حرف الابن يستخدم علامة الاكتفاء (حرف الابن).

يمكن أن يكون هناك مسافات بين جوانب حرف الابن، وهي اختيارية. لذلك، جميع الطرق التالية صحيحة:

h1 > strong
h1> strong
h1 >strong
h1>strong

إذا قرأتم من اليمين إلى اليسار، يمكن تفسير المحدد h1 > strong كـ “سيختار جميع العناصر strong التي تكون أبناء العنصر h1”.

دمج المحددات الذرية والابنية

انظروا إلى المحدد التالي:

table.company td > p

سيختار المحدد أعلاه جميع عناصر p التي تكون أبناء عنصر td، والذي يورث نفسه من عنصر table يحتوي على class تحتوي على company.