السلام عليكم، رأينا في الدرس 12 من هذه الدورة درس المحدِّدات في CSS المحددات البسيطة :
* محدد العنصر -------------- Element Type Selector
* محدد ID Selector ------------------ ID
* محدد CLASS Selector -------------- CLASS
* المحدد الشامل ------------ Universal Selector
و رأينا في الدرس 27 من هذه الدورة درس المحددات المركبة Combinators و محددات Attribute في CSS :
* المحددات المركبة --------- Combinators
* محددات Attribute Selectors --------- Attribute
أما في هذا الدرس، فسنرى نوع آخر من المحددات ألا و هو Pseudo-classe.
ما هو Pseudo-classe ؟
Pseudo-classe هو نوع من أنواع المحددات وظيفته إعطاء إمكانية تطبيق مظهر بـ CSS على عناصر HTML إبان كونها في حالة معينة.
كيفية إقحام Pseudo-classe في كود CSS
تُقحَم جميع Pseudo-classes في كود CSS بنفس الطريقة حيث يُكتب المحدد أولاً سواء كان بسيطاً أم مركباً، ثم نقطتان Double Point ':'، ثم إسم Pseudo-classe مع الأخذ بعين الإعتبار تفادي الفراغات من نوع Space بين المحدد و النقطتين و إسم Pseudo-classe، و يمكن كتابة سوى Pseudo-classe ( النقطتين و إسم Pseudo-classe ) حيث في هذه الحالة تُستهدف جميع العناصر في ملف HTML، و أيضا يمكن تركيب النقطتين و إسم Pseudo-classe مع عناصر أخرى HTML.
الفيديو التوضيحي للدرس
أنواع Pseudo-classes
هناك العديد من Pseudo-classes في CSS، سنتطرق في هذا الدرس لأهمها و أكثرها استعمالاً من طرف مصممي الويب.
LINK:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عنصر HTML لم يسبق النقر عليه، و غالباً ما يُستعمَل هذا Pseudo-classes في الروابط.
VISITED:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عنصر HTML سبق نُقر عليه، و غالباً ما يُستعمَل هذا Pseudo-classes في الروابط.
HOVER:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عنصر HTML عندما يكون مؤشر الفأرة فوقه مباشرة.
ACTIVE:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عنصر HTML أثناء النقر عليه.
EMPTY:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على جميع العناصر الفارغة المحتوى.
()LANG:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على جميع العناصر التي تحتوي على Attribute بإسم 'LANG' مُقيَّمة بكود ISO 639-1 للغة معينة، حيث يقحم هذا الأخير بين قوسي هذا Pseudo-classes.
FIRST-CHILD:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على العنصر الأول في العنصر المحتوي له، شريطة أن يكون في المستوى الموالي لمستوى العنصر المحتوي له، و أن لا يكون عنصر محتوى قبله في نفس مستواه داخل العنصر المحتوي له.
LAST-CHILD:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على العنصر الأخير في العنصر المحتوي له، شريطة أن يكون في المستوى الموالي لمستوى العنصر المحتوي له، و أن لا يكون عنصر محتوى بعده في نفس مستواه داخل العنصر المحتوي له.
FIRST-OF-TYPE:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على العنصر الأول من نوعه في العنصر المحتوي له.
LAST-OF-TYPE:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على العنصر الأخير من نوعه في العنصر المحتوي له.
ONLY-CHILD:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على جميع العناصر التي هي الوحيدة المحتواة داخل العنصر المحتوي لها.
ONLY-OF-TYPE:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على جميع العناصر التي هي الوحيدة من نوعها المحتواة داخل العنصر المحتوي لها.
()NTH-CHILD:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عناصر تتواجد في رتب معينة مقارنة مع عناصر أخرى محتواة في نفس العنصر المحتوي، و لها نفس المستوى، و يقتصر الإستهداف على ما بداخل قوسي Pseudo-classes حيث هناك قاعدة خاصة بمحتوى أقواس Pseudo-classes ذوات كلمة 'NTH' في إسمها.
قاعدة أقواس Pseudo-classes ذوات NTH
يقحم داخل أقواس Pseudo-classes ذوات كلمة 'NTH' نوعين من القيم :
• الكلمات المفتاحية
- 'ODD' : تَستهدف هذه الكلمة المفتاحية العناصر التي في الترتيب الفردي.
- 'EVEN' : تَستهدف هذه الكلمة المفتاحية العناصر التي في الترتيب الزوجي.
• العمليات الحسابية الرياضية
- 'عدد صحيح' : يُكتب عدد صحيح حيث سيتم استهداف عنصر واحد، و هو العنصر المرتب في رتبة العدد الصحيح المقحَم.
- 'n عدد صحيح' : يُكتب عدد صحيح و بجواره الأيمن حرف 'N' حيث سيتم استهداف جميع العناصر التي في ترتيب مضاعفات العدد الصحيح المقحَم.
- 'عدد صحيح + n عدد صحيح' : يُكتب عدد صحيح، ثم حرف 'N'، ثم علامة الزائد '+'، ثم عدد صحيح، و بالتالي سيتم استهداف العناصر حسب ناتج العملية الحسابية المقحومة، علماً أن الحرف 'N' يعتبر المتغير في العملية الحسابية حيث يساوي 0 عند استهداف العنصر الأول، و يساوي 1 عند استهداف العنصر الموالي، و يساوي 3 استهداف العنصر الموالي، و هكذا...
- 'عدد صحيح + n-' : يُكتب سالب الحرف 'N'، ثم علامة الزائد '+'، ثم عدد صحيح، و بالتالي سيتم استهداف أول مجموعة العناصر محددة بالعدد الصحيح المُقحم، مع الأخد بعين الإعتبار Pseudo-classes النقيضة حيث يتم استهداف آخر مجموعة العناصر محددة بالعدد الصحيح المُقحم.
( يمكن الإستعانة بأمثلة الفيديو التوضيحي للدرس من أجل فهم أكثر للقاعدة )
()NTH-LAST-CHILD:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عناصر تتواجد في رتب معينة مقارنة مع عناصر أخرى محتواة في نفس العنصر المحتوي، و لها نفس المستوى، إلا أن الإستهداف يتم بطريقة عكسية، أي يتم استهداف العناصر من الأسفل إلى الأعلى رغم تشابه محتوى الأقواس، لذا يعتبر هذا Pseudo-classes نقيض '()NTH-CHILD:'.
()NTH-OF-TYPE:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عناصر من نفس النوع تتواجد في رتب معينة مقارنة مع عناصر أخرى محتواة في نفس العنصر المحتوي، و لها نفس المستوى، و هذا يقتصر على ما بداخل القوسين حسب قاعدة الأقواس.
()NTH-LAST-OF-TYPE:
يمنح هذا النوع من Pseudo-classes إمكانية تطبيق مظهر بـ CSS على عناصر من نفس النوع تتواجد في رتب معينة مقارنة مع عناصر أخرى محتواة في نفس العنصر المحتوي، و لها نفس المستوى، إلا أن الإستهداف يتم بطريقة عكسية، أي يتم استهداف العناصر من الأسفل إلى الأعلى رغم تشابه محتوى الأقواس، لذا يعتبر هذا Pseudo-classes نقيض '()NTH-OF-TYPE:'.
في حالة تواجد العديد من Pseudo-classes في عنصر واحد، تعطي CSS3 الأولوية للـ Pseudo-classe المقحَم أخيراً
الأكواد المستعملة في الدرس