x

ما هي لغة CSS ؟

ما الأنواع المختلفة لمُحدِّدات العلاقات (Combinators) في CSS ؟

نظري

مُركِّبات CSS - (CSS Combinators)

تُستخدم مُركِّبات CSS (Combinators) لتحديد العلاقة بين المُحدِّدات (Selectors) في CSS ; فهي تساعد في اختيار العناصر بناءً على علاقتها بعناصر أخرى، مما يتيح تطبيق تنسيقات أكثر دقة وكفاءة.

سنناقش بعض مُركِّبات CSS الأساسية وحالات استخدامها، بدءاً بمُركِّب العناصر التابعة (descendant combinator).

مُركِّب العناصر المتحدِّرة - (Descendant Combinator)

يُستخدم مُركِّب العناصر المتحدِّرة (descendant combinator) لاستهداف العناصر التي يطابقها المُحدِّد الثاني، وذلك في حال كانت متداخلةً داخل عنصر "سلف" (ancestor) يطابقه المُحدِّد الأول. ويمكن أن يكون هذا السلف عنصراً أباً (parent) أو جداً (grandparent) أو أي عنصر آخر يسبقه في التسلسل الهرمي لشجرة المستند.

لفهم كيفية عمل ذلك بشكل أفضل، دعنا نلقِ نظرة على مثال.

index.html


<link rel="stylesheet" href="styles.css">

<figure>
 <img src="https://openarabtech.github.io/src/assets/relaxing-cat.jpg" alt="قطة تسترخي">
 <figcaption>قطة مسترخية بإطار</figcaption>
</figure>

styles.css


figure img {
 border: 4px solid red;
}

معاينة:


في المثال أعلاه، نستخدم مُحدِّد العناصر المتحدِّرة (descendant combinator) لاختيار جميع عناصر الصور الموجودة داخل عناصر figure وتطبيق "إطار أحمر مصمت" (solid red border) على الجوانب الأربعة.

لاحظ أنه يتم استخدام "مسافة" (space) بين "مُحدِّد العنصر الأب ومُحدِّد العنصر الابن" (the parent and child selector).

في هذه الحالة، سيكون العنصر figure هو "العنصر الأب" (the parent) , وسيكون العنصر img هو "العنصر الابن" (the child).

إذا كانت لديك صور متعددة داخل عنصر figure , فإن استخدام "مُحدِّد العناصر المتحدِّرة" (descendant combinator) يُعد طريقة جيدة لتطبيق "إطار أسود مصمت" (solid black border) حول كل صورة من تلك الصور.

مُركِّب الابن المباشر - (Child Combinator)

نوع آخر من المُركِّبات هو "مُركِّب الابن" (child combinator).

يُستخدم مُحدِّد الابن (child combinator) - (>) في CSS لاختيار العناصر التي تُعد أبناءً مباشرةً لـ"عنصر أبٍ" (parent element) مُحدَّد.

يستهدف هذا المُجمِّع (combinator) العناصر التي تتبع أباً محدداً فقط، مما يجعل قواعد CSS الخاصة بك أكثر دقة ويحول دون تطبيق التنسيق بشكل غير مقصود على العناصر المتداخلة في مستويات أعمق.

لنلقِ نظرةً على مثال HTML التالي: 


<div class=container>
 <p>أولاً</p>
 <div>
  <p>ثانيًا</p>
 </div>
 <div>
  <p>ثالثًا</p>
 </div>
</div>

معاينة:


في بنية HTML المذكورة أعلاه، يتم تطبيق الفئة container على عنصر div.

يوجد داخل هذه "الحاوية " (container) عنصر p يمثل "ابناً مباشراً" (direct child) (يحمل النص "أولاً")، يليه عنصرَا div إضافيان، يحتوي كل منهما على عنصر p (يحملان النصين "ثانيًا" و"ثالثًا" على التوالي).

يُعد عنصر p الأول "ابناً مباشراً" (direct child) لعنصر .container , في حين أن عنصري p الآخرين متداخلان داخل عناصر div أخرى، مما يجعلهما عنصرين فرعيين يقعان في مستوى أعمق من التسلسل الهرمي.

لتطبيق الأنماط على "الابن المباشر" (direct child) لفئة الحاوية (container class) فقط، يمكنك استخدام مُركِّب الابن (child combinator) على النحو التالي:

index.html


<link rel="stylesheet" href="styles.css">
        
<div class=container>
 <p>أولاً</p>
 <div>
  <p>ثانيًا</p>
 </div>
 <div>
  <p>ثالثًا</p>
 </div>
</div>

styles.css


.container > p {
 color: blue;
}

معاينة:


في المثال أعلاه، نحن نستهدف فقط "الابن المباشر" (direct child) للفئة (class) المسماة container. سيؤدي ذلك إلى جعل لون نص هذا الابن المباشر "أزرق" blue.

نظراً لأن عنصري "الفقرة" (paragraph) الآخرين متداخلان داخل عناصر div , فإنهما لا يُعتبران أبناءً مباشرين للفئة الحاوية (container class) , وبالتالي لن يكتسبا اللون الأزرق للنص.

مُركِّب الأخ التالي - (Next-Sibling Combinator)

من أدوات الربط الشائعة الأخرى أداة الربط الخاصة بالعنصر الشقيق التالي (next-sibling combinator).

يُستخدم مُحدِّد "العنصر الشقيق التالي" (Next-Sibling Combinator) - (+) في CSS لاختيار عنصر يأتي مباشرةً بعد عنصر شقيق مُحدَّد. وتكمن فائدة هذا المُحدِّد في إمكانية تطبيق أنماط (styles) على عنصر يتبع عنصراً آخر بشكل مباشر، مما يتيح تنسيقاً موجَّهاً يعتمد على موقع العنصر بالنسبة للعناصر الشقيقة الأخرى.

لنلقِ نظرةً على مثال HTML التالي: 


<figure>
 <img src="https://openarabtech.github.io/src/assets/relaxing-cat.jpg" alt="قطة برتقالية لطيفة مستلقية على ظهرها.">
 <figcaption>قطة برتقالية لطيفة مستلقية على ظهرها.</figcaption>
</figure>

معاينة:


لدينا هنا عنصر figure يحتوي على عنصر img يليه عنصر figcaption ; ويُعد عنصر figcaption "الشقيق المباشر" (the immediate sibling) لعنصر img.

إذا أردت تطبيق "إطار أسود" (black border) حول العنصر figcaption , يمكنك استخدام مُشغِّل "العنصر الشقيق التالي" (next-sibling combinator) على النحو التالي:

index.html


<link rel="stylesheet" href="styles.css">

<figure>
 <img src="https://openarabtech.github.io/src/assets/relaxing-cat.jpg" 
    alt="قطة برتقالية لطيفة مستلقية على ظهرها.">
 <figcaption>قطة برتقالية لطيفة مستلقية على ظهرها.</figcaption>
</figure>

styles.css


img + figcaption {
 border: 4px solid black;
}

معاينة:


في هذا المثال، يختار "مُحدِّد الشقيق التالي" (next-sibling combinator) - (+) عنصر figcaption الذي يلي عنصر img مباشرةً، وتُضيف قاعدة CSS المُطبَّقة "إطاراً أسود متصلاً بسُمك 4 بكسل" (4px solid black border) حول عنصر figcaption.

مُركِّب الأشقاء اللاحقين - (Subsequent-Sibling Combinator)

مُركِّب الأشقاء اللاحقين (Subsequent-sibling Combinator) هو مُركِّب شائع آخر.

يختار مُركِّب الأشقاء اللاحقين (~) في CSS جميع الأشقاء لعنصرٍ مُحدَّدٍ والذين يقعون بعده.

على عكس مُحدِّد الأخ التالي المباشر (next-sibling combinator) الذي يستهدف فقط العنصر الشقيق الذي يلي العنصر المحدد مباشرةً، يمكن لمُحدِّد الأشقاء اللاحقين (subsequent-sibling combinator) - (~) استهداف أي عناصر شقيقة تلي العنصر المحدد، مما يوفر مرونة أكبر في التنسيق.

لنلقِ نظرةً على مثال HTML التالي: 


<div class="container">
 <h2>عنوان فرعي</h2>
 <p>الفقرة الأولى.</p>
 <p>الفقرة الثانية.</p>
 <p>الفقرة الثالثة.</p>
 <p>عنصر فقرة آخر</p>
</div>

معاينة:


في هيكلية HTML هذه، لدينا عنصر h2 تتبعه أربعة عناصر فقرة p. وتُعد عناصر الفقرة هذه عناصر شقيقة (siblings) لعنصر h2.

إذا كنت ترغب في تنسيق جميع عناصر الفقرة p التي تلي عنصر h2 , فيمكنك استخدام مُحدِّد "الأخ اللاحق" (subsequent-sibling combinator) على النحو التالي:

index.html


<link rel="stylesheet" href="styles.css">

<div class="container">
 <h2>عنوان فرعي</h2>
 <p>الفقرة الأولى.</p>
 <p>الفقرة الثانية.</p>
 <p>الفقرة الثالثة.</p>
 <p>عنصر فقرة آخر</p>
</div>

styles.css


h2 ~ p {
 color: green;
}

معاينة:


في هذا المثال، سيكون لون نص جميع عناصر الفقرة p التي تلي عنصر h2 "أخضر" green.

يستهدف المُركِّب (~) جميع عناصر الفقرات p التي تلي عنصر h2 مباشرةً أو بشكل غير مباشر (أي جميع الفقرات الشقيقة التي تظهر بعده).

لماذا تُعد "مُجمِّعات سي.اس.اس" (CSS Combinators) مهمة؟

ختاماً، يتيح لك فهم واستخدام مختلف مُجمِّعات سي.اس.اس (CSS combinators) تطبيق أنماط دقيقة على عناصر HTML، مما يعزز التحكم في تصميمك ويزيد من مرونته.

ومن خلال إتقان هذه المُحدِّدات، يمكنك إنشاء قواعد تنسيق أكثر تطوراً وتحديداً، مما يحسّن كلاً من مظهر صفحات الويب ووظائفها.

أسئلة :

ما هي قاعدة CSS التي ستُطبّق التنسيق على جميع عناصر span الموجودة داخل عناصر div, بغض النظر عن مستوى تداخلها؟

1. 


div > span {
 color: red;
}
❌

2. 


div + span {
 color: red;
}
❌

3. 


div ~ span {
 color: red;
}
❌

4. 


div span {
 color: red;
}
✅


ما هي قاعدة CSS التي ستُنسق فقط عناصر li الفرعية المباشرة لعناصر ul ؟

1. 


ul > li {
 font-weight: bold;
}
✅

2. 


ul li {
 font-weight: bold;
}
❌

3. 


ul + li {
 font-weight: bold;
}
❌

4. 


ul ~ li {
 font-weight: bold;
}
❌


ما هي قاعدة CSS التي ستُطبّق التنسيق على أول عنصر p يلي مباشرةً أي عنصر h1 ؟

1. 


h1 > p {
 margin-top: 0;
}
❌

2. 


h1 + p {
 margin-top: 0;
}
✅

3. 


h1 ~ p {
 margin-top: 0;
}
❌

4. 


h1 p {
 margin-top: 0;
}
❌