تحديد عنصر يكون تابعا (ابن) لعنصر آخر

[الفارس]

تحديد عنصر يكون تابعا (ابن) لعنصر آخر

div.some-parent > .class-name { }
في المثال السابق، يكون العنصر الابن على مستوى واحد أسفل من العنصر الأب. تستطيع أن تُحدد عنصر من سلالة عنصرآأخر (الأب)، وهذا يعني من أي مستوى أسفل من مستوى العنصر الأب (ليس شرطا أن يكون مستوى واحد أقل):

div.some-parent .class-name { }
يختلف المُحدد التالي عن المُحدد السابق لوجود مسافة فاصلة بين الأسماء:

div.some-parent.class-name { }
نستطيع تحديد العنصر بناءً على عنصر آخر مجاور له باستخدام الطريقة التالية:

.i-am-just-before + .this-element { }
أو بناءً على أي عنصر يسبق العنصر الذي نريده:

.i-am-any-element-before ~ .this-element { }
توجد بعض المُحددات تسمى الأصناف الزائفة pseudo classes تطبَّق على العنصر عندما يكون بحالة محددة، فمثلا، نستطيع تحديد عنصر عندما يمر عليه المؤشر:

selector:hover { }
أو رابط تمت زيارته:

selector:visited { }
أو لم تتم زيارته:

selected:link { }
أو عنصر في حالة التركيز:

selected:focus { }
لتحديد أول عنصر تابع لعنصر:

selector:first-child {}
لتحديد آخر عنصر تابع لعنصر:

selector:last-child {}
نستطيع تنسيق أجزاء محددة من العنصر باستخدام العناصر الزائدة Pseudo elements، فمثلا، نستخدم before لإضافة محتوى قبل محتوى عنصر معين:

selector::before {}
وafter لإضافة محتوى بعد محتوى عنصر معين:

selector::after {}
في أماكن معينة، يُستخدم رمز * كحرف “بدل” لاختيار كافة العناصر.

* { } /* كل العناصر */
.parent * { } /* كل التابعين */
.parent > * { } /* كل الأبناء */