شرح المجمعات (Combinators) فى CSS
ستتعلم فى هذا الفصل المجمعات (Combinators) فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.
CSS Combinators
تشرح المجمعات combinators فى CSS العلاقة بين محددين.
هناك أربعة أنواع من combinators في CSS والتي سيتم مناقشتها الأن:
- descendant selector ( )
- General Sibling selector (~).
- Adjecant Sibling selector (+).
- child selector (>)
محددات الـ CSS هي الأنماط المستخدمة لتحديد العناصر لغرض style، يمكن أن يكون محدد CSS محددًا بسيطًا أو محددًا معقدًا يتكون من أكثر من محدد واحد متصل باستخدام الـ combinators.
1. Descendant selector
Descendant selector (أو المدمج الفرعي) يتم تمثيله عادةً بحرف مسافة واحدة ( ) – يجمع بين محددين بحيث يتم تحديد العناصر المطابقة بواسطة المحدد الثاني.
يتم استخدام هذا المحدد لتحديد جميع العناصر الفرعية للوسم المحدد.
يمكن أن تكون الوسوم التابعة مباشرة للوسم المحدد أو يمكن أن تكون عميقة جدًا في الوسم المحدد.
مثال للتوضيح:
<style> div span { color: #00f; text-align:center; } </style> <div> <span>Descendant selector example</span> </div>
2. General Sibling selector
General Sibling selector (أو محدد الأشقاء العام) يختار جميع العناصر التي تمثل أشقاء عنصر محدد.
إذا كنت تريد تحديد أشقاء عنصر حتى لو لم يكونوا متجاورين بشكل مباشر ، فيمكنك استخدام مُجمع الأشقاء العام (~).
مثال للتوضيح:
<style> div ~ p { color: #00f; font-weight: bold; } </style> <div> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Adjacent Sibling selector
Adjecant Sibling selector (أو محدد الأخوة المجاور) يتم استخدامه لتحديد جميع العناصر التي تمثل الأشقاء المجاورة لعنصر محدد.
مثال للتوضيح:
<style> div + p { color: #00f; font-weight: bold; } </style> <div> <div>Child div</div> <p>Arcu erat, accumsan id imperdiet et, porttitor at sem.</p> </div> <p>Ipsum dolor sit amet, consectetur adipiscing elit.</p>
Arcu erat, accumsan id imperdiet et, porttitor at sem.
Ipsum dolor sit amet, consectetur adipiscing elit.
4. Child Selector
Child Selector (أو المحدد الفرعى) يتم استخدام هذا المحدد لتحديد العنصر التابع للوسم المحدد مباشرًا.
هذا المحدد أكثر صرامة من descendant selector لأنه يحدد المحدد الثاني فقط إذا كان لديه عنصر المحدد الأول كعنصر أصل له.
مثال للتوضيح:
<style> ul > li { color: #00f; font-weight: bold; } </style> <ul> <li>HTML</li> <li>CSS</li> <li>Frameworks: <ol> <li>Vue</li> <li>Angular</li> <li>React</li> </ol> </li> </ul>
- HTML
- CSS
- Frameworks:
- Vue
- Angular
- React
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!