random
أخبار ساخنة

شرح CSS Pseudo-classes واستخدامها مع الأمثلة العملية

Samouel Ghaly
الصفحة الرئيسية

شَرْحُ CSS Pseudo-classes وَاسْتِخْدَامِهَا مَعَ الأَمْثِلَةِ العَمَلِيَّةِ

فِي لُغَةِ CSS، لَا يَقْتَصِرُ التَّحَكُّمُ فِي مَظْهَرِ العَنَاصِرِ عَلَى خَصَائِصِهَا الثَّابِتَةِ فَقَطْ، بَلْ نَحْتَاجُ دَوْمًا إِلَى تَغْيِيرِ التَّنْسِيقِ دِينَامِيكِيًّا بِنَاءً عَلَى سُلُوكِ المُسْتَخْدِمِ أَوْ مَوْقِعِ العُنْصُرِ البِنْيَوِيِّ. هُنَا يَأْتِي دَوْرُ الْفِئَاتِ الزَّائِفَةِ (CSS Pseudo-classes)، وَهِيَ كَلِمَاتٌ مِفْتَاحِيَّةٌ تُضَافُ إِلَى المُحَدِّدَاتِ لِاسْتِهْدَافِ العَنَاصِرِ فِي حَالَةٍ مُعَيَّنَةٍ (State) أَوْ طَبِيعَةٍ مَكَانِيَّةٍ دَاخِلَ شَجَرَةِ الـ DOM. فَهْمُكَ لِهَذِهِ الأَدَوَاتِ يُغْنِيكَ عَنْ كِتَابَةِ شِيفْرَاتِ جَافَا سْكْرِيبْت مُعَقَّدَةٍ لِإِدَارَةِ التَّفَاعُلَاتِ البَسِيطَةِ.

---

مَا هِيَ الـ Pseudo-class؟ وَكَيْفَ تُكْتَبُ؟

الـ Pseudo-class هِيَ صِفَةٌ زَائِفَةٌ تَلْتَصِقُ بِمُحَدِّدِ العُنْصُرِ بَعْدَ كِتَابَةِ "نُقْطَتَيْنِ رَأْسِيَّتَيْنِ" ( : ) بِمُبَاشِرَةً دُونَ فَرَاغَاتٍ. تُخْبِرُ هَذِهِ الصِّيغَةُ المُتَصَفِّحَ بِأَنَّ هَذَا التَّنْسِيقَ لَا يَظْهَرُ إِلَّا إِذَا تَحَقَّقَتْ هَذِهِ الحَالَةُ التَّفَاعُلِيَّةُ أَوْ البِنْيَوِيَّةُ المَطْلُوبَةُ.

---

1. الفِئَاتُ الزَّائِفَةُ الخَاصَّةُ بِالرَّوَابِطِ وَالتَّفَاعُلِ (User Action)

تُسْتَخْدَمُ لِتَقْدِيمِ تَغْذِيَةٍ بَصَرِيَّةٍ رَاجِعَةٍ (Visual Feedback) لِلْمُسْتَخْدِمِ عِنْدَ التَّفَاعُلِ مَعَ الرَّوَابِطِ أَوْ العَنَاصِرِ القَابِلَةِ لِلْنَّقْرِ، وَيَجِبُ كِتَابَتُهَا حَتْمًا بِتَرْتِيبِ قَاعِدَةِ (LVHA) الشَّهِيرَةِ: 

a:link    { color: #0066cc; } /* الرَّابِطُ الاِفْتِرَاضِيُّ الَّذِي لَمْ يُزَرْ بَعْدُ */
a:visited { color: #5a2b9b; } /* الرَّابِطُ الَّذِي قَامَ المُسْتَخْدِمُ بِزِيَارَتِهِ سَابِقًا */
a:hover   { color: #ff5722; } /* عِنْدَ تَمْرِيرِ مُؤَشِّرِ المَاوْسِ فَوْقَ الرَّابِطِ */
a:active  { color: #4caf50; } /* لَحْظَةُ الضَّغْطِ الفِعْلِيِّ عَلَى الرَّابِطِ بِالمَاوْسِ */
---

2. الفِئَاتُ الزَّائِفَةُ الخَاصَّةُ بِالنَّمَاذِجِ وَحُقُولِ الإِدْخَالِ (Forms)

تُعْتَبَرُ حَاسِمَةً فِي تَحْسِينِ تَجْرِبَةِ المُسْتَخْدِمِ أَثْنَاءَ كِتَابَةِ البَيَانَاتِ؛ حَيْثُ تَقُومُ بِتَلْوِينِ الحُقُولِ تِلْقَائِيًّا بِنَاءً عَلَى صِحَّةِ المَدْخَلَاتِ أَوْ حَالَةِ الحَقْلِ:

الفِئَةُ الزَّائِفَةُ حَالَةُ التَّفْعِيلِ البَصَرِيِّ مِثَالٌ كُودِيٌّ عَمَلِيٌّ
:focus عِنْدَمَا يَقُوفُ المُسْتَخْدِمُ بِالنَّقْرِ دَاخِلَ الحَقْلِ لِلْكِتَابَةِ. input:focus { border: 2px solid #00bcd4; }
:checked تُسْتَهْدَفُ خِيَارَاتُ الـ Checkbox أَوْ Radio المُنْتَقَاةِ. input:checked { transform: scale(1.2); }
:disabled تُطَبَّقُ عَلَى الحُقُولِ المُعَطَّلَةِ الَّتِي لَا يُمْكِنُ كِتَابَتُهَا. input:disabled { background: #eee; color: #999; }
:required تَسْتَهْدِفُ حُقُولَ الإِدْخَالِ الإِجْبَارِيَّةِ الَّتِي يَجِبُ مَلْؤُهَا. input:required { border-right: 3px solid red; }
:valid تَعْمَلُ تِلْقَائِيًّا عِنْدَمَا تَكُونُ البَيَانَاتُ المَكْتُوبَةُ صَحِيحَةً. input:valid { background-color: #e8f5e9; }
:invalid تَعْمَلُ تِلْقَائِيًّا عِنْدَ وُجُودِ خَطَأٍ فِي صِيغَةِ البَيَانَاتِ. input:invalid { background-color: #ffebee; }
---

3. الفِئَاتُ الزَّائِفَةُ الهَيْكَلِيَّةُ (Structural Pseudo-classes)

تُتِيحُ لَكَ اِسْتِهْدَافَ العَنَاصِرِ بِنَاءً عَلَى تَرْتِيبِ مَوْقِعِهَا الهَنْدَسِيِّ دَاخِلَ العُنْصُرِ الأُمِّ، وَهِيَ قَوِيَّةٌ جِدًّا فِي تَنْسِيقِ الجَدَاوِلِ وَالقَوَائِمِ:

3.1 مَجْمُوعَةُ الـ Child (التَّرْتِيبُ العَامُّ لِلْأَبْنَاءِ)

تَنْظُرُ هَذِهِ المَجْمُوعَةُ إِلَى تَرْتِيبِ العُنْصُرِ بَيْنَ جَمِيعِ الأَبْنَاءِ مَهْمَا كَانَ نَوْعُ وَسْمِهِمْ:

  • p:first-child: يَسْتَهْدِفُ فَقَرَةَ p إِذَا كَانَتْ هِيَ الاِبْنُ الأَوَّلُ تَمَامًا دَاخِلَ الحَاوِيَةِ.
  • p:last-child: يَسْتَهْدِفُ فَقَرَةَ p إِذَا كَانَتْ هِيَ الاِبْنُ الأَخِيرُ تَمَامًا.
  • p:nth-child(n): مُحَدِّدٌ دِينَامِيكِيٌّ يَسْتَهْدِفُ عُنْصُرًا بِرَقْمِ تَرْتِيبِهِ (مِثْلَ nth-child(2) لِلِابْنِ الثَّانِي، أَوْ اسْتِخْدَامِ كَلِمَةِ even لِلْزَّوْجِيِّ وَ odd لِلْفَرْدِيِّ).
  • p:only-child: يَسْتَهْدِفُ الفَقَرَةَ إِذَا كَانَتْ هِيَ الاِبْنُ الوَحِيدُ لِأَبِيهَا (لَا يُوجَدُ لَهَا أَشِقَّاءٌ).

3.2 مَجْمُوعَةُ الـ Type (التَّرْتِيبُ بِنَاءً عَلَى نَوْعِ الوَسْمِ)

تَقُومُ هَذِهِ المَجْمُوعَةُ بِفَرْزِ العَنَاصِرِ حَسَبَ نَوْعِ الوَسْمِ نَفْسِهِ، وَتَتَجَاهَلُ العَنَاصِرَ الأُخْرَى المُخْتَلِفَةَ المَوْجُودَةَ فِي نَفْسِ المُسْتَوَى:

  • p:first-of-type: يَسْتَهْدِفُ أَوَّلَ فَقَرَةِ p تَظْهَرُ دَاخِلَ الحَاوِيَةِ حَتَّى لَوْ سَبَقَتْهَا عَنَاوِينُ أُخْرَى.
  • p:last-of-type: يَسْتَهْدِفُ آخِرَ فَقَرَةِ p دَاخِلَ الصُّنْدُوقِ.
  • p:nth-of-type(3): يَسْتَهْدِفُ الفَقَرَةَ رَقْمَ 3 مِنْ نَوْعِ فَقَرَاتِ الـ p تِلْقَائِيًّا.
---

4. الفِئَاتُ الزَّائِفَةُ المُتَنَوِّعَةُ وَالمُتَقَدِّمَةُ

تُوجَدُ خِيَارَاتٌ مَنْطِقِيَّةٌ وَبِنْيَوِيَّةٌ تُعْطِيكَ قُدْرَةً اِسْتِثْنَائِيَّةً عَلَى التَّصْفِيَةِ:

  • مُحَدِّدُ النَّفْيِ :not(): يَسْمَحُ لَكَ بِاسْتِثْنَاءِ عُنْصُرٍ مُعَيَّنٍ مِنْ التَّنْسِيقِ. 
    /* تَلْوِينُ جَمِيعِ الفَقَرَاتِ بِالرَّمَادِيِّ مَا عَدَا الفَقَرَةَ الَّتِي تَحْمِلُ كِلَاسَ special */
p:not(.special) { color: gray; }
  • مُحَدِّدُ الفَرَاغِ :empty: يَسْتَهْدِفُ العَنَاصِرَ الَّتِي لَا تَحْتَوِي عَلَى أَيِّ مَحْتَوًى نَصِّيٍّ أَوْ أَبْنَاءٍ (مِثْلَ صَنَادِيقِ التَّنْبِيهِ الفَارِغَةِ قَبْلَ أَنْ تَفِيْضَ بِالبَيَانَاتِ).
  • مُحَدِّدُ الجِذْرِ :root: يَسْتَهْدِفُ أَعْلَى عُنْصُرٍ حَاوٍ فِي المُسْتَنَدِ (وَهُوَ وَسْمُ <html>)، وَيُسْتَخْدَمُ بِشَكْلٍ قِيَاسِيٍّ لِتَعْرِيفِ مُتَغَيِّرَاتِ الـ CSS العَالَمِيَّةِ (CSS Variables) كَمَا يَلِي: 
    :root {
    --main-color: #00bcd4; /* تَعْرِيفُ اللَّوْنِ الرَّئِيسِيِّ لِلْمَوْقِعِ */
}
body {
    background-color: var(--main-color);
}
---
رابط موقع w3schools
 

خَاتِمَةٌ

إِنَّ اِحْتِرَافَ خَاصِّيَّاتِ الـ CSS Pseudo-classes يَنْقُلُ تَصْمِيمَاتِكَ مِنْ مَرْحَلَةِ الجُمُودِ إِلَى مَرْحَلَةِ الحَيَوِيَّةِ وَالتَّفَاعُلِ الاِحْتِرَافِيِّ. فَهِيَ تُؤَمِّنُ لَكَ طَرِيقَةً نَظِيفَةً لِصِيَاغَةِ أَكْوَادٍ قَلِيلَةٍ وَفَعَّالَةٍ تَتَجَاوَبُ سَلِسًا مَعَ تَحَرُّكَاتِ المُسْتَخْدِمِينَ وَبِنْيَةِ المَوْقِعِ. جَرِّبْ دَمْجَ هَذِهِ الفِئَاتِ فِي مَشَارِيعِكَ التَّطْوِيرِيَّةِ لِتَحْصُلَ عَلَى وَاجِهَاتِ مُسْتَخْدِمٍ مَرِنَةٍ، اِحْتِرَافِيَّةٍ، وَمُتَوَافِقَةٍ مَعَ أَعْلَى مَعَايِيرِ الوِيبِ العَالَمِيَّةِ.

google-playkhamsatmostaqltradent