CSS

CSS Combinator selectors
تحديد العناصر بالعلاقات في لغة CSS

سوف تتعلم في هذا الدرس كيفه اختيار العناصر المرتبطة بعلاقة معاً مثل العناصر الداخلية والمجاورة أو العنصر الأب لعنصر معين لإضافة style عليها في لغة CSS وتسمي هذه الطريقة Combinator selectors.

التاريخ

30 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2925

المواضيع

24
الشروحات chevron_left CSS Combinator selectors chevron_left CSS
CSS Flex Box keyboard_arrow_down

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.

CSS general sibling selector
p ~ ul
{
  background: #ff0000;
}
مصطلحات الدرس
Advanced
Advanced

اضافي / متقدم

Selectors
Selectors

محددات

Element
Element

عنصر

Class
Class

فئة

Value
Value

قيمة

blank_
blank_

تعني فتح الرابط في صفحة جديدة

Active
Active

نشط / فعال

After
After

بعد

Before
Before

قبل

Checked
Checked

تحقق

Radio
Radio

مربع إختيار دائري

Checkbox
Checkbox

مربع إختيار

Width
Width

عرض

Height
Height

ارتفاع

Default
Default

إفتراضي

Empty
Empty

فارغ

Color
Color

لون

Input
Input

حقل إدخال

Enabled
Enabled

تفعيل / إمكان

First-Child
First-Child

الطفل الأول

First-Letter
First-Letter

النص الأول

First-Line
First-Line

السطر الأول

First-of-Type
First-of-Type

الأول من نوعه

Focus
Focus

تركيز

Full Screen
Full Screen

شاشة كاملة

Hover
Hover

يحوم

In-Range
In-Range

في نطاق / حدود

Indeterminate
Indeterminate

غير محدد

Progress
Progress

تقدم

Invalid
Invalid

غير صالح

Last-Child
Last-Child

الطفل الأخير

Last-of-Type
Last-of-Type

الأخير من نوعه

link
link

رابط

Marker
Marker

علامة / ظلال

Not
Not

ليس

Optional
Optional

اختياري

Only-of-Type
Only-of-Type

فقط من نوعه

Out of Rang
Out of Rang

خارج نطاق / حدود

Read Only
Read Only

قراءة فقط

Read-Write
Read-Write

قراءة / كتابة

Required
Required

مطلوب

Root
Root

جذر / أصل

Selection
Selection

اختيار

Target
Target

الهدف

Valid
Valid

صالح

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
Lang
Lang

Language

لغة
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.