CSS Combinator selectors
تحديد العناصر بالعلاقات في لغة CSS
سوف تتعلم في هذا الدرس كيفه اختيار العناصر المرتبطة بعلاقة معاً مثل العناصر الداخلية والمجاورة أو العنصر الأب لعنصر معين لإضافة style عليها في لغة CSS وتسمي هذه الطريقة Combinator selectors.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Combinator selectors
تحديد العناصر بالمجمعات في لغة CSS
</>
CSS Combinator selectors
تحديد العناصر بالمجمعات في لغة CSS
Combinator selectors هي اختيار عناصر تربطها علاقة معاً مثل العناصر الداخلية وتسمي children الأبناء أو العناصر parent الأب أو العناصر sibling الأخوة في لغة CSS.
أنواع Combinator selectors في لغة CSS:
- descendant selector العناصر من أب أو من نسل واحد.
- child selector أبناء العناصر وهي العناصر الداخلية.
- adjacent sibling selector العناصر الأخوة المباشرة.
- general sibling selector العناصر الأخوة العامة.
</>
CSS descendant selector
العناصر من أب أو من نسل واحد في لغة CSS
لاختيار جميع العناصر الموجودة بداخل عنصر معين في لغة CSS يجب كتابة اسم العنصر parent الأب في البداية متبوعاً باسم child الأبن ونفصل بينهم بمسافة واحدة.
CSS descendant selector
العناصر من أب أو من نسل واحد في لغة CSS.
div p
{
background-color: #007bff;
color:white;
}
</>
CSS child selector
تحديد العناصر الداخلية أو الأبناء في لغة CSS
لتحديد العناصر children الأبناء أو الداخلية لعنصر ما parent من نوع معين مثل جميع <p> أو جميع <span> في لغة CSS فيجب كتابة اسم العنصر parent الأب متبوعاً بعلامة أكبر من > ثم اسم عنصر الأبن ليصبح بهذا الشكل [div > p].
CSS child selector
اختيار العناصر الأبناء او الداخلية في لغة CSS.
div > p
{
background-color: #007bff;
}
</>
CSS adjacent sibling selector
تحديد العنصر الأخ المجاور في لغة CSS
لتحديد العنصر الأخ المجاور مباشرة في لغة CSS فيجب تحديد العنصر الأساسي متبوعاً بعلامة plus + ثم العنصر التالي مباشرة ولتحديد paragraph يلي div فنكتب بهذا الشكل [div + p].
CSS adjacent sibling selector
تحديد العناصر الأخوة المجاورة في لغة CSS.
div + p
{
background-color: #007bff;
}
</>
CSS general sibling selector
تحديد جميع العناصر الأخوة المجاورة في لغة CSS
لتحديد جميع العناصر الأخوة المجاورة في لغة CSS بعد عنصر معين فنكتب أسم العنصر الذي يتبعه عنصر اخ مباشر متبوعاً باسم العنصر المجاور مثل [p ~ ul] لتحديد جميع ul فقط التي تلي أو بجوار عنصر p.
اضافي / متقدم
محددات
عنصر
فئة
سمة
قيمة
تعني فتح الرابط في صفحة جديدة
اخر
نشط / فعال
بعد
قبل
تحقق
مربع إختيار دائري
مربع إختيار
عرض
ارتفاع
إفتراضي
فارغ
ظل
لون
حقل إدخال
تفعيل / إمكان
الطفل الأول
النص الأول
السطر الأول
الأول من نوعه
تركيز
شاشة كاملة
يحوم
في نطاق / حدود
غير محدد
تقدم
غير صالح
الطفل الأخير
الأخير من نوعه
رابط
علامة / ظلال
ليس
اختياري
فقط من نوعه
خارج نطاق / حدود
قراءة فقط
قراءة / كتابة
مطلوب
جذر / أصل
اختيار
الهدف
صالح
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
