أهم محددات العناصر الزائقة Pseudo Classes Selectors

محددات العناصر الزائفة هي المحددات المسبوقة بنقطتين رأسيتين : (colon) ومن أشهرها المحدد :hover وكما ذكرنا لا تستخدم منفرده في معظم الحالات، بل تسخدم مع المحدد، إذا هي بمثابة حالة من حالات المحدد أو جزء منه.

المحددات الزائفة تقدم حلول سريعة وبسيطة لكثير من المواقف، كما أنها مدعومة بنسبة كبيرة جداً في معظم المتصفحات حتى في متصفح Internet Explorer (المشهور دوماً بعدم دعمه لبعض الخصائص القوية خاصة الخصائص الجديدة)، فبداية من من الإصدار IE9 تم الدعم الكامل للمحددات الزائفة.
تذكر أن المحددات الزائفة من النقط القوية في CSS حيث فهمك لها يجعلك تقدم حلول بسيطة بالقليل من الأكواد لمشاكل ربما ستكون كبيرة إذا كنت لا تعلم ما هي المحددات الزائفة.
بإستخدام المحددات الزائفة يمكنك في كثير من الأحيان من الإستغناء عن كثير من فئات العناصر CSS Classes التي تستخدمها في تحديد العناصر، وهذا ما يجعل أكواد HTML تظهر بشكل بسيط، لكن تذكر أيضاً أن لكل مقامٍ مقال، ففي بعض الحالات ستجد من المناسب جداً استخدام العناصر الزائفة، وفي بعض الحالات ستجد من المناسب استخدام فئات العناصر Classes.
لذلك ستجد دائماً أكثر من خيار لتحديد العناصر، واختيار الأنسب يرجع إليك في المقام الأخير، وكلما كانت نظرتك أبعد حيث يكون في مخيلتك دائماً إمكانية تطوير الأكواد مستقبلياً أو أن هناك شخصاً أخر سيقوم بتطوير الأكواد التي تكتبها مستقبلياً، أو أن المشروع الذي تعمل عليه يحتوي على الكثير من الصفحات والوظائف التي تتطلب المزيد من أكواد التنسيق CSS، كلما كانت النتيجة أفضل وأختيار الأنسب سيكون بنسبة كبيرة.
هناك قاعدة نفعتني كثيراً اكتسبتها أثناء عملي في TieLabs، وهي: لماذا يكون لدينا byte واحد (أي حرف واحد) في ملفات التنسيق CSS وليس له وظيفة؟!
كلما كانت الأكواد بسيطة، مرتبه بشكل جيد، موثقة جيداً، ليس فيها قواعد ومحددات من الممكن الإستغناء عنها، كلما كانت النتيجة أفضل وأكثر ثباتاً وفي نفس الوقت إمكانية تطويرها مستقبلياً بشكل أفضل.

الآن بعد هذة المقدمة دعنا نلقي سريعة على هذة المحددات الزائفة

المحددات الزائفة المتعلقة بالروابط التشعيبية

العنصر الزائف :link

من أكثر محددات العناصر الزائفة المتعلقة بالروابط التشعيبية غموضاً وتشويشاً، على الرغم بساطته إلى أنه غير واضح لكثير من المبتدئين في تطوير الويب، هل سيقوم بتحديد جميع الروابط التشعيبية ؟نعم سيقوم بتحديد جميع الروابط التشعيبية ما عدا الروابط التي لا تحتوي على الخاصية href أي أنه سيقوم بتحديد الروابط التي تعمل بالفعل.
هذا المحدد سيصبح أكثر فائدةً حيث يجب دائماً أن تكون الروابط فعالة وتحتوي على الخاصية href

العنصر الزائف :visitied

يقوم بتحديد جميع الروابط التي تم زيارتها من قبل بواسطة المتصفح الحالي ( المستخدم في فتح هذة الروابط من قبل).

العنصر الزائف :active

يقوم بتحديد الروابط في حالة الضغط عليها، أو تفعيلها بأي طريقة أخرى. بهذا المحدد يمكنك إظهار الروابط التشعيبية تماماً بمظهر يشبه كثيراً الأزرار.

مثال على العناصر الزائفة للروابط التشعيبية

See the Pen pseudo classes #1 by Ashraf Reda (@ashrafreda) on CodePen.

لاحظ أن الرابط الأول ليس لديه الخاصية href لذلك ظهر وكأنه نص عادي ليس مثل باقي الروابط (تظهر الروابط بشكل افتراضي في متصفح كروم باللون الأزرق وأسفلها خط)
دعنا نقوم بتحويل هذة القائمة البسيطة من مجموعة من الروابط إلى مجموعة من الأزرار ذات الشكل الجذاب:

See the Pen pseudo classes #2 by Ashraf Reda (@ashrafreda) on CodePen.

قمنا باستخدام المحدد a بدون استخدام أي من العناصر الزائفة معه ليقوم بتطبيق الخصائص على جميع الروابط وفي كل الحالات، ثم بعد ذلك سنقوم بإضافة الحالات المختلفة أسفله.
لست الآن بحاجة لشرح هذة الخصائص في المثال السابق، كل هذة الخصائص تم شرحها في دروس سابقة يمكنك الرجوع إليها مرةً ثانية إذا أردت، ولكن بشكل مختصر فقد قمنا بالأتي:

• محاذاة العناصر بجانب بعضها البعض بإستخدام الخاصية Float
• حذف الخط الموضوع أسفل الروابط بشكل افتراضي بإستخدام الخاصية text-decoration
• إضافة حواشي (هوامش داخلية) بمقدار 10px أعلى وأسفل و 15px على الجانبين.
• إضافة خلفية للروابط باستخدام الخاصية background-color
• تغير لون الروابط من اللون الإفتراضي (الأزرق) للون الأبيض.
• إضافة حدود بلون أخضر داكن حول الروابط باستخدام الخاصية border

الآن سنقوم بتطبيق الخصائص للحالات المخلتفة للروابط، حالة مرور المؤشر، حالة الضغط على الروابط، حالة الروابط المُزارة من قبل،،

See the Pen pseudo classes #3 by Ashraf Reda (@ashrafreda) on CodePen.

المحددات الزائفة المتعلقة بالروابط التشعيبية وحقول الإدخال

١- العنصر الزائف :focus

تغير شكل الروابط في حالة مرور المؤشر يُعد من الأمور المهمة والجيدة في بالنسبة للمستخدم، حيث عند تغير الشكل يعلم أن هذة المساحة قابلة للضغط (رابط). لكن ماذا عن الذين يستخدمون لوحة المفتاح لتصفح الموقع بدلاً من مؤشر الفأرة؟!
المحدد الزائف :focus سيقوم بتحديد الروابط التي تم اختيارها بإستخدام لوحة المفتاح ( من خلال التنقل بالزر Tab ).
وهذا المحدد ليس مقصوراً على الروابط التشعيبية وفقط يستخدم أيضاً في حقول الإدخال.
وفي غالب الأحيان يتم تطبيق نفس الخصائص على الحالتين :hover و :focus خصوصاً في حقول الإدخال.

See the Pen pseudo classes #4 by Ashraf Reda (@ashrafreda) on CodePen.

عندما تقوم بوضع المؤشر في حقل الإدخال يتحول للحالة :focus أيضاً عندما تنتقل بلوحة المفاتيح بإستخدام الزر TAb فالحقل الذي يتم اختياره يتحول إلى الحالة :focus
في المثال السابق قمنا بتغيير لون الخلفية في الحالة :hover إلى اللون الرمادي الفاتح، وفي حالة :focus قمنا بتغيير لون الحدود إلى اللون deepskyblue

لاحظ أننا قمنا بتكرار المحددات input و textarea ثلاثة مرات، هل بإمكانك منع هذا التكرار؟ كيف؟
نعم يمكنك، بإمكانك إضافة الخاصية class بنفس القيمة لجميع حقول الإدخال واستخدامها منفرده بدلاً من تكرار المحددات هكذا:

ثم في ملف التنسيق:

وستحصل على نفس النتيجة، وبذلك يمكنك استخدام الكلاس input-field لأي حقل إدخال في موقعك وسيتم تطبيق نفس الخصائص عليه.

٢- العنصر الزائف :target

في الأونة الأخيرة انتشرت جداً مواقع الويب التي تتكون من صفحة واحدة مقسمة إلى عدة أقسام قائمة رئيسية، وكل قسم له رابط في القائمة الرئيسية يشير إليه، عند الضغط عليه ينقلك مباشرةً إلى هذا القسم، عملية الإنتقال هذة ليس لها علاقة بالمحدد الزائف :tartget ولكنك عندما يتم انتقالك إلى القسم يصبح هذا القسم هو الهدف Target المطلوب الوصول إليه، لذلك يمكنك تحديد القسم الذي تم نقلك إليه وتطبيق بعض الخصائص عليه من خلال المحدد الزائف :targt وعندما تقوم بالنقر على رابط لقسم أخر يتم حذف الهدف الأول تحديد هدف جديد وهكذا…

يعمل المحدد الزائف :target مع محدد المُعرف ID أي أنه لا يعمل مع باقي المحددات، حيث أن المحدد id هو فقط دون باقي المحددات من يسمح لك بالإنتقال من مكان لأخر في صفحة الويب.

عندما تكون قيمة الخاصية href مسبوقة بالرمز # هكذا:

وتحتوي الصفحة على عنصر(أي عنصر) بنفس قيمة الخاصية href هكذا:

فعند الضغط على الرابط About Section يقوم المحدد الزائف #about:target بتحديد العنصر

وتطبيق الخصائص المطلوبة.سيتضح الأمر أكثر بالمثال التالي:

See the Pen pseudo classes #5 by Ashraf Reda (@ashrafreda) on CodePen.

في المثال السابق قمنا بتغير خلفية العنصر المُستهدف فور الوصول إليه باستخدام المحدد الزائف :target ، أيضاً يمكنك استخدام المحدد الزائف :target لإنجاز مهام أخرى، في هذا المثال يمكنك إنشاء مساحة تبيوبات، وعند الضغط على التبويب يقوم بإظهار المساحة الخاصة بيه وإخفاء باقي المساحات.

٣- العنصر الزائف :enable

يقوم بتحديد جميع عناصر الإدخال النشطة، أو الموجودة في الحالة الإفتراضية لها وجاهزة للإستخدام مباشرةً، أو بمعنى أخر الحقول التي لا تحتوي على الخاصية disabled.
ليس كل حقول النموذج يمكنها انت تكون في الحالة enable أو disabled ، الحقول الثلاثة هذة فقط:

• <input>
• <select>
• <textarea>

الحالة الإفتراضية لهذة الحقول هي enable، والحقول المُفعلة هذة يمكنك اختيارها، النقر عليها، أو تكون جاهزة لإدخال البيانات.

إليك المثال التالي:

See the Pen pseudo classes #6 by Ashraf Reda (@ashrafreda) on CodePen.

العنصر الثالث غير مُفعل، أي يحتوي على الخاصية disabled
وحتى نقوم بإظهار العناصر المُفعلة أكثر،قمنا بتعيين لون العنصر label باللون الرمادي، ثم بعد ذلك قمنا بتعين لون العنصر label الذي يأتي مباشرةً بعد العنصر input المُفعل باللون الأسود. فكانت النتيجة كما ترى، حيث يتضح من أول وهله ما هي العناصر المُفعله وما هي العناصر الغير مُفعله.

٤- العنصر الزائف :disenable

على عكس المحدد الزائف :enabled يقوم المحدد الزائف :disabled بتحديد العناصر الغير مُفعلة، أي التي تحتوي على الخاصية disabled

بشكل إفتراضي تقوم معظم المتصفحات بتغير شكل العناصر الغير مُفعله لتظهر باللون الرمادي، حتى يتم تميزها عن العناصر المُفعله، كما أنك لا يمكنكك النقر عليها، أو إدخال بيانات في الحقول النصية الغير مُفعله، أو اختيار بواسطة لوحة المفاتيح باستخدام الزر Tab

See the Pen pseudo classes #7 by Ashraf Reda (@ashrafreda) on CodePen.

٥- العنصر الزائف :checked

هناك ثلاثة أنواع من الحقول يتم تحديد الإختيار منها بإضافة الكلمة المفتاحية checked :
حقول الإختيار من متعدد Chceckbox
أزرار الإنتقاء Radio button
العنصر Option في القائمة المنسدلة Select
ويقوم المحدد الازائف :checked بتطبيق التنسيق المطلوب على العناصر المنتقاه أو التي تم إختيارها من الحقول الثلاثة.

٦- العنصر الزائف indeterminate:

يقوم بتحديد أزرار الإنتقاء radio التي في الحالة البينية ،ليست في حالة الإختيار أو عدم الإختيار( مثل ما يحدث عند تحميل الصفحة ولم يتم تحديد قيم إفتراضية لأزرار الإنتقاء.

٧- العنصر الزائف required:

يقوم بتحديد العناصر التي تحتوي على الخاصية required

٨- العنصر الزائف optional:

على عكس المحدد الزئف :required يقوم المحدد :optional بتحديد العناصر التي لا تحتوي على الخاصية required

٩- العناصر الزائفة :read-only / :read-write :

تقوم بتحديد العناصر إعتماداً على الخصائص read-only و read-write