تعرفنا في الدرس السابق على الفئات ومقدرتها الكبيرة على التحكم بخواص كل عنصر بشكل منفرد وسنتعرف اليوم على أشباه الفئات.
تلاحظ عند استخدامك لأحد المواقع أنه عندما تضع مؤشر الماوس فوق أحد الروابط فإن لونه يتغير أو يكبر حجمه , وعندما تضغط على الرابط فإن لونه يتغير , أو عندما تضع مؤشر الماوس فوق صورة فإنها تتحرك... , كل هذا وأكثر يمكنك عمله ببساطه مع أشباه الفئات .ماهي أشباه الفئات؟
تسمى أيضاً "الفئة المزيفة" أو Pseudo-Class , وهي في الحقيقة تشبه الفئات في عملها أي أنها تقوم بتغيير خواص العنصر الذي نربطه بها , ولكن الفرق بينها وبين الفئات هو أن أشباه الفئات لا تطبق خصائصها على العنصر إلا في حالات معينة أو عند حصول حدث معين مثل النقر على هذا العنصر أو مرور الماوس فوق هذا العنصر .القاعدة العامة لاستخدام أشباه الفئات :
selector:pseudo-class { property : value; }
كما يمكن استخدام أشباه الفئات مع الفئات حسب القاعدة التالية :
selector.className:pseudo-class
{ property
: value; }
أشباه الفئات المتعلقة بالوصلات التشعبية :
الوصلات التشعبية ماهي إلا العنصر <a> الذي يستخدم لإدراج روابط الانتقال في صفحات الويب , وأشباه الفئات المتعلقة بالروابط هي أربعة وهي :أولاً : شبه الفئة link
وهي خاصة بالروابط فقط , وهي تطبق الخصائص التي تحددها أنت على الرابط في وضعه الطبيعي عندما تفتح الصفحة لأول مرة والذي لم يتم النقر عليه بعد .ثانياً : شبه الفئة visited
وهي خاصة بالروابط فقط , وهي تطبق الخصائص التي تحددها أنت على الرابط الذي قد تم النقر عليه أي قد تمت زيارته , ولكن ستختفي تماماً الخصائص التي وضعتها في شبه الفئة link .ثالثاً : شبه الفئة hover
وهي تطبق الخصائص التي تحددها أنت على الرابط (أو أي عنصر في صفحة الويب) عند مرور الماوس فوقه , ومادام مؤشر الماوس فوق الرابط فإن الخصائص التي في شبه الفئة hover هي التي ستطبق على الرابط .رابعاً : شبه الفئة active
وهي تطبق الخصائص التي تحددها أنت على الرابط (أو أي عنصر في صفحة الويب) اثناء النقر عليه , ثم تختفي الخصائص بعد افلات زر الماوس (أي بعد انتهاء النقر) .انظر للمثال التالي والذي يوضح ما ذكرته سابقاً :
<html>
<head>
<style>
/* الوضع الطبيعي للرابط
عند فتح
الصفحة لأول مرة */
a:link { color : Blue; }
/* بعد زيارة الرابط */
a:visited
{
color:
Red;
}
/* عند مرور مؤشر
الماوس فوق
الرابط */
a:hover
{
color:
White;
background-color: Blue;
}
/* اثناء النقر على
الرابط */
a:active
{
font-size: 20pt; /* سيكبر حجم
الخط */
color:
Yellow;
}
</style>
</head>
<body>
<a href="#">انقر هنا</a>
</body>
</html>
المثال التالي يوضح استعمال أشباه الفئات hover و active مع الفئات و عناصر HTML أخرى :
<html>
<head>
<style type="text/css">
.class1:hover
{
color:
Yellow;
background-color: Blue;
}
.class2:active
{
color:
Blue;
background-color: Yellow;
}
</style>
</head>
<body>
<h1 class="class1">With
Hover</h1>
<h2 class="class2">With
Active</h2>
</body>
</html>
يمكنك أيضاً استعمال نفس الخصائص مع فئات وأشباه فئات مختلفة فقط سنفصل بينها باستخدام الفاصلة , وهذه الطريقة تستخدم اذا أردت استعمال نفس الخصائص مع أكثر من فئة أو عنصر وهي مفيدة جداً فهي تختصر عليك كتابة المزيد من الأسطر , سوف نعدل في المثال السابق ليصبح كالتالي :
<html>
<head>
<style>
.class1:hover, .class2:active, a:hover
{
color: Yellow;
background-color: Blue;
}
</style>
</head>
<body>
<h1 class="class1">With
Hover</h1>
<h2 class="class2">With
Active</h2>
<a href="#">
Click Here </a>
</body>
</html>
كما ترى فقد تحكمنا في خواص 3 عناصر مباشرة ودون كتابة المزيد من الأسطر .قم بتطبيق هذه الأكواد بنفسك , أيضاً لا تتقيد بالنصوص فقط بل قم بتجربة هذه الخواص على الصور والأزرار وغيرها من عناصر HTML .