دروس السي إس إس - صفحات الأنماط الانسيابية - CSS أشباه الفئات (Pseudo-class)

أشباه الفئات (Pseudo-class)

السلام عليكم ........

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


{"القيمة" : المتغير } شبه الفئة: وسم هتمل

أو (في حالة وجود فئة أيضاً):


{"القيمة" : المتغير } شبه الفئة:فئة. وسم هتمل

قد تبدو مزعجة للوهلة الأولى ! لكنك ستكتشف مدى سهولته بعد المثال التالي :

في المثال السابق : حددنا اللون (#000088) للرابط العادي الذي لم يزار بعد . كما حددنا تنسيق النص بلا شيء حتى لا يظهر خط سفلي تحت الرابط . حددنا اللون الأحمر للرابط الذي سبقت زيارته ! كذلك حددنا اللون الزهري مع خط بأسفل النص و حجم (10 نقاط) للنص . أما الرابط النشط (الحالي) فقد حددنا له اللون الأزرق الفاتح .

الطريقة سهلة ، جربها بنفسك الآن .


تحذير
أنصحك بكتابة أنماط الروابط التشعبية بالترتيب الوارد في المثال السابق (link ثم visited ثم hover ثم active) و إلا فإن الأخريين لن يعملا بالشكل الصحيح !



سنأخذ مثالاً آخر يوضح كيفية استخدام الفئات مع أشباه الفئات في مثال واحد :

المثال يشرح نفسه ، حددنا الفئة (main) للرابط الذي لم يزار باللون الأخضر و في المقابل حددنا الفئة (sub) للرابط الذي لم يزار أيضاً باللون الأحمر .
يجب استخدام الطريقة المشروحة في جزء الفئات عند استخدامك إحدى الفئتين بالطبع .