شَرْحُ مُحَدِّدَاتِ العلاقاتِ فِي CSS (CSS Combinators) وَعَلَاقَتِهَا بِالعَنَاصِرِ
عِنْدَ بِنَاءِ وَتَنْسِيقِ صَفَحَاتِ الوِيبِ بِاسْتِخْدَامِ لُغَةِ
CSS، لَا نَكْتَفِي فَقَطْ بِاسْتِهْدَافِ العَنَاصِرِ
بِأَسْمَائِهَا أَوْ عَبْرَ الفِئَاتِ (Classes)، بَلْ نَحْتَاجُ فِي كَثِيرٍ
مِنَ الأَحْيَانِ إِلَى تَعْيِينِ التَّنْسِيقَاتِ بِنَاءً عَلَى
العَلَاقَاتِ التَّرْكِيبِيَّةِ وَالشَّجَرِيَّةِ بَيْنَ
العَنَاصِرِ دَاخِلَ شِيفْرَةِ الـ HTML. هُنَا يَأْتِي دَوْرُ مُحَدِّدَاتِ
العَلَاقَاتِ أَوْ مَا يُعْرَفُ بِـ Combinators. هَذِهِ
المُرَكَّبَاتُ تَشْرَحُ لِلْمُتَصَفِّحِ كَيْفِيَّةَ اِرْتِبَاطِ عُنْصُرٍ
بِعُنْصُرٍ آخَرَ (أَبْ، اِبْنٌ، شَقِيقٌ مُجَاوِرٌ، أَوْ شَقِيقٌ عَامٌّ)
لِتَطْبِيقِ أَنْمَاطٍ دَقِيقَةٍ جَدًّا بِدُونِ حَاجَةٍ لِإِضَافَةِ كِلَاسَاتٍ
زَائِدَةٍ.
مَا هُوَ الـ Combinator فِي CSS؟
الـ Combinator هُوَ رَمْزٌ أَوْ عَلَامَةٌ رَبْطٍ تَقَعُ بَيْنَ
مُحَدِّدَيْنِ (Selectors) لِتَشْكِيلِ عَلَاقَةٍ بِنْيَوِيَّةٍ بَيْنَهُمَا.
تُوجَدُ فِي لُغَةِ CSS أَرْبَعَةُ أَنْوَاعٍ رَئِيسِيَّةٍ لِمُحَدِّدَاتِ
العَلَاقَاتِ، وَتَعْتَمِدُ كُلُّهَا عَلَى مَوْقِعِ العُنْصُرِ فِي شَجَرَةِ الـ
HTML.
1. Descendant Combinator (مُحَدِّدُ التَّابِعِ / السَّلِيلِ)
يُمَثَّلُ هَذَا المُحَدِّدُ بِوَضْعِ مَسَافَةٍ فَارِغَةٍ (Space) بَيْنَ المُحَدِّدِ الأَوَّلِ وَالمُحَدِّدِ الثَّانِي. يَقُومُ هَذَا الأَمْرُ بِاسْتِهْدَافِ أَيِّ عُنْصُرٍ يَقَعُ دَاخِلَ العُنْصُرِ الأَوَّلِ، سَوَاءٌ كَانَ اِبْنًا مُبَاشِرًا لَهُ، أَوْ حَفِيدًا غَيْرَ مُبَاشِرٍ (مَهْمَا كَانَ عُمْقُ التَّدَاخُلِ).
/* اسْتِهْدَافُ جَمِيعِ فَقَرَاتِ p المَوْجُودَةِ دَاخِلَ أَيِّ div */
div p {
color: red;
}
مِثَالٌ بِنْيَوِيٌّ (HTML):
<div>
<p>هَذَا النَّصُّ سَيُصْبِحُ بِاللَّوْنِ الأَحْمَرِ (اِبْنٌ مُبَاشِرٌ).</p>
<section>
<p>هَذَا النَّصُّ سَيُصْبِحُ بِاللَّوْنِ الأَحْمَرِ أَيْضًا (حَفِيدٌ / تَابِعٌ).</p>
</section>
</div>
---
2. Child Combinator (مُحَدِّدُ الاِبْنِ المُبَاشِرِ)
يُمَثَّلُ هَذَا المُحَدِّدُ بِعَلَامَةِ أَكْبَرَ مِنْ ( > ). يَقُومُ هَذَا الرَّابِطُ بِاسْتِهْدَافِ العَنَاصِرِ الَّتِي تُمَثِّلُ اِبْنًا مُبَاشِرًا (Direct Child) فَقَطْ لِلْعُنْصُرِ الأَوَّلِ، وَيَتَجَاهَلُ الحَفَدَةَ أَوِ العَنَاصِرَ الأَكْثَرَ عُمْقًا دَاخِلَ الهَيْكَلِ.
/* اسْتِهْدَافُ فَقَرَاتِ p الَّتِي تُمَثِّلُ اِبْنًا مُبَاشِرًا لِلْـ div فَقَطْ */
div > p {
color: blue;
}
مِثَالٌ بِنْيَوِيٌّ (HTML):
<div>
<p>هَذَا النَّصُّ سَيُصْبِحُ بِاللَّوْنِ الأَزْرَقِ (لِأَنَّهُ اِبْنٌ مُبَاشِرٌ).</p>
<section>
<p>لَنْ يَتَأَثَّرَ هَذَا النَّصُّ (لِأَنَّهُ حَفِيدٌ وَلَيْسَ اِبْنًا مُبَاشِرًا).</p>
</section>
</div>
---
3. Next Sibling Combinator (مُحَدِّدُ الشَّقِيقِ المُجَاوِرِ)
يُمَثَّلُ هَذَا المُحَدِّدُ بِعَلَامَةِ الزَّائِدِ ( + ). يُسْتَخْدَمُ لِاسْتِهْدَافِ عُنْصُرٍ شَقِيقٍ (يَقَعُ فِي نَفْسِ المُسْتَوَى البِنْيَوِيِّ)، شَرِيطَةَ أَنْ يَلِيَ العُنْصُرَ الأَوَّلَ مُبَاشِرَةً دُونَ وُجُودِ أَيِّ عُنْصُرٍ فَاصِلٍ بَيْنَهُمَا.
/* اسْتِهْدَافُ فَقَرَةِ p الَّتِي تَأْتِي بَعْدَ عُنْصُرِ h1 مُبَاشِرَةً */
h1 + p {
font-weight: bold;
}
مِثَالٌ بِنْيَوِيٌّ (HTML):
<h1>العُنْوَانُ الرَّئِيسِيُّ</h1> <p>هَذَا النَّصُّ سَيُصْبِحُ عَرِيْضًا (Bold) لِأَنَّهُ يَلِي العُنْوَانَ مُبَاشِرَةً.</p> <span>عُنْصُرٌ فَاصِلٌ</span> <p>لَنْ يَتَأَثَّرَ هَذَا النَّصُّ نِهَائِيًّا بِسَبَبِ وُجُودِ الفَاصِلِ.</p>---
4. Subsequent-sibling Combinator (مُحَدِّدُ الشَّقِيقِ العَامِّ)
يُمَثَّلُ هَذَا المُحَدِّدُ بِعَلَامَةِ المَدَّةِ ( ~ ). يُسْتَخْدَمُ لِاسْتِهْدَافِ جَمِيعِ العَنَاصِرِ الأَشِقَّاءِ الَّتِي تَأْتِي بَعْدَ عُنْصُرٍ مُعَيَّنٍ وَتَقَعُ مَعَهُ فِي نَفْسِ المُسْتَوَى، دُونَ اِشْتِرَاطِ أَنْ تَكُونَ مُجَاوِرَةً لَهُ مُبَاشِرَةً (أِيْ يَعْمَلُ حَتَّى مَعَ وُجُودِ فَرَاقَاتٍ أَوْ عَنَاصِرَ أُخْرَى بَيْنَهُمْ).
/* اسْتِهْدَافُ جَمِيعِ فَقَرَاتِ p الَّتِي تَأْتِي بَعْدَ h1 فِي نَفْسِ المَسَارِ */
h1 ~ p {
font-style: italic;
}
مِثَالٌ بِنْيَوِيٌّ (HTML):
<h1>العُنْوَانُ</h1> <p>سَيُصْبِحُ مَائِلًا (Italic).</p> <span>عُنْصُرٌ جَانِبِيٌّ</span> <p>سَيُصْبِحُ مَائِلًا أَيْضًا (لِأَنَّهُ شَقِيقٌ عَامٌّ يَأْتِي بَعْدَ العُنْوَانِ).</p>---
جَدْوَلُ المُقَارَنَةِ المِعْيَارِيِّ لِمُحَدِّدَاتِ العَلَاقَاتِ فِي CSS
لِمَسْحِ الرُّمُوزِ وَفَهْمِ فُرُوقِ الِاسْتِهْدَافِ بِنَظْرَةٍ سَرِيعَةٍ:
| النَّوْعُ (Combinator) | الرَّمْزُ | آلِيَّةُ الِاسْتِهْدَافِ البَصَرِيِّ | نِطَاقُ العَلَاقَةِ (Scope) |
|---|---|---|---|
| Descendant | مسافة فارغة |
يَسْتَهْدِفُ كُلَّ العَنَاصِرِ الدَّاخِلِيَّةِ مَهْمَا كَانَ عُمْقُهَا. | الأَبْنَاءُ + الحَفَدَةُ (عَلَاقَةٌ عَمُودِيَّةٌ كَامِلَةٌ). |
| Child | > |
يَسْتَهْدِفُ الطَّبَقَةَ الأُولَى فَقَطْ مِنَ العَنَاصِرِ الدَّاخِلِيَّةِ. | الأَبْنَاءُ المُبَاشِرُونَ فَقَطْ (عَلَاقَةٌ عَمُودِيَّةٌ مُقَيَّدَةٌ). |
| Next Sibling | + |
يَسْتَهْدِفُ عُنْصُرًا وَاحِدًا يَلِي العُنْصُرَ المَذْكُورَ فَوْرًا. | الشَّقِيقُ الأَوَّلُ التَّالِي تَمَامًا (عَلَاقَةٌ أُفُقِيَّةٌ لَصِيقَةٌ). |
| Subsequent Sibling | ~ |
يَسْتَهْدِفُ كُلَّ العَنَاصِرِ المُتَطَابِقَةِ الَّتِي تَأْتِي بَعْدَهُ. | جَمِيعُ الأَشِقَّاءِ التَّالِيينَ (عَلَاقَةٌ أُفُقِيَّةٌ عَامَّةٌ). |
خُلَاصَةٌ
تُمَثِّلُ مُحَدِّدَاتُ العَلَاقَاتِ (Combinators) أَدَاةً اِحْتِرَافِيَّةً لِكِتَابَةِ شِيفْرَاتِ CSS نَظِيفَةٍ، مُخْتَصَرَةٍ، وَمُرْتَبِطَةٍ دِينَامِيكِيًّا بِبِنْيَةِ الصَّفْحَةِ. مِنْ خِلَالِ اِسْتِيعَابِكَ لِلْفُرُوقِ البَيْنِيَّةِ لِهَذِهِ الرُّمُوزِ، تَسْتَطِيعُ بِنَاءَ تَنْسِيقَاتٍ ذَكِيَّةٍ لِلْمَقَالَاتِ، المَجَلَّاتِ، وَالنَّمَاذِجِ التَّفَاعُلِيَّةِ، مِمَّا يَرْفَعُ مِنْ كَفَاءَةِ قَوَالِبِكَ الرَّقْمِيَّةِ وَيُسَهِّلُ صِيَانَتَهَا مُسْتَقْبَلًا.