الكورس

Advertisements

شرح المجمعات (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>
Descendant selector example

 

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>
Child div

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:
    1. Vue
    2. Angular
    3. React


الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements