ما هي الفئات الزائفة Pseudo-classes ؟
تسمح لنا الفئات الزائفة pseudo-classes بتصميم الحالات الديناميكية لعنصر مثل التمرير hover والحالة النشطة active والتركيز focus ، بالإضافة إلى العناصر الموجودة في شجرة المستند ولكن لا يمكن استهدافها عبر استخدام محددات أخرى دون إضافة معرفات أو فئات لأي منها ، على سبيل المثال ، استهداف العناصر الأبناء الأولى أو الأخيرة لعنصر ما.
تبدأ الفئة الزائفة بنقطتين (:). ويكون بناء الجملة لمحددات الفئات الزائفة بالشكل التالي:
selector:pseudo-class { property: value };
في هذا الدرس سوف نتعلم الفئات الزائفة الأكثر إستخداما.
الفئات الزائفة للرابط التشعبي css
تتيح لنا الفئات الزائفة لعنصر الرابط التشعبي <a> تصميم الروابط بشكل مختلف حسب حالة الرابط . في المثال التالي سنقوم بإزالة التسطير الافتراضي من الرابط التشعبي للروابط التي لم يسبق لنا زيارتها والروابط التي تمت زيارتها.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo-classes</title>
<style>
body {
font-size: 20px;
direction : rtl;
}
a:link , a:visited {
text-decoration: none;
color: #1db79f;
}
</style>
</head>
<body>
<p>تفضل بزيارة <a href="http://alawirisaddam.blogspot.com/" target="_blank">www.alawirisaddam.blogspot.com</a></p>
</body>
</html>
المخرجات
بعض فئات الروابط التشعبية الزائفة ديناميكية dynamic يتم تطبيقها كنتيجة لتفاعل المستخدم مع المستند مثل التمرير أو التركيز وما إلى ذلك.
<html>
<head>
<meta charset="utf-8">
<title>Pseudo-classes</title>
<style>
body {
font-size: 20px;
direction : rtl;
}
a:link , a:visited {
text-decoration: none;
color: #1db79f;
}
a:hover , a:active {
text-decoration : underline;
color: #116e60;
}
a:focus {
color: red;
}
</style>
</head>
<body>
<p>تفضل بزيارة <a href="http://alawirisaddam.blogspot.com/" target="_blank">www.alawirisaddam.blogspot.com</a></p>
</body>
</html>
المخرجات
تعمل هذه الفئات الزائفة على تغيير كيفية عرض الروابط استجابةً لإجراءات المستخدم.
-
:hoverيتم تطبيقها عندما يضع المستخدم المؤشر فوق العنصر ، لكنه لا يحدده. -
:activeيتم تطبيقها عند تنشيط العنصر أو النقر فوقه. -
:focusيتم تطبيقها عندما يكون العنصر به تركيز لوحة المفاتيح او النقر بزر الفأرة مطولا .
لجعل هذه الفئات الزائفة تعمل بشكل مثالي ، يجب علينا تحديدها بالترتيب التالي -:
:link-
:visited -
:hover -
:active -
:focus
first-child:
تطابق الفئة الزائفة :first-child العنصر الأبن الأول لعنصر آخر. المحدد ol li:first-child في المثال أدناه سيحدد البند الأول من القائمة المرتبة وسيزيل الحد العلوي منه.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first-child</title>
<style>
body {
direction:rtl;
font-size:22px;
width :75%;
margin:auto;
text-align:center;
}
ol{
padding: 0;
list-style: none;
}
ol li{
padding: 10px 0;
border-top: 1px solid #000000;
}
ol li:first-child {
border-top: none;
}
</style>
</head>
<body>
<h1>قائمة مرتبة بسيطة</h1>
<ol>
<li>مزج المكونات</li>
<li>تخبز في الفرن لمدة ساعة</li>
<li>اتركه لمدة عشر دقائق</li>
</ol>
</body>
</html>
المخرجات
last-child:
تطابق الفئة الزائفة :last-child العنصر الإبن الأخير في عنصر آخر. المحدد ul li:last-child في المثال أدناه سيحدد آخر بند في القائمة الغير مرتبة وسيقوم بإزالة الحد الأيسر منه.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first-child</title>
<style>
body {
direction : rtl;
text-align: center;
}
ul{
padding: 0;
list-style: none;
}
ul li{
display: inline;
padding: 0 20px;
border-left: 1px solid #000000;
}
li:last-child {
border-left: none;
}
</style>
</head>
<body>
<h1>نموذج لشريط التنقل </h1>
<hr>
<ul>
<li>الرئيسية</li>
<li>من نحن</li>
<li>خدماتنا</li>
<li>تواصل معنا</li>
</ul>
</body>
</html>
المخرجات
nth-child:
في الاصدار الأخير CSS3 تم إضافة فئة زائفة جديدة :nth-child تسمح لنا باستهداف إبن او اكثر لعنصر معين. وتكون بناء الجملة لهذا المحدد هي :nth-child(N) ، حيث N هي وسيط argument والتي يمكن أن تكون رقمًا أو كلمة محجوزة (even أو odd ) أو تعبيرًا xn+y حيث x و y هي أعداد صحيحة (على سبيل المثال ، 1n, 2n, 2n+1, …).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-child</title>
<style>
body {
direction:rtl;
font-size:22px;
}
table{
margin: auto;
border-collapse: collapse;
width:75%;
}
table tr{
border-bottom: 1px solid #666;
}
table tr th, table tr td{
padding: 10px;
text-align:center;
}
table tr:nth-child(2n) td{
background: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>الرقم</th>
<th>الاسم الاول</th>
<th>الاسم الأخير</th>
<th>البريد الإلكتروني</th>
</tr>
<tr>
<td>1</td>
<td>مراد</td>
<td>مصطفى</td>
<td>msmustafa@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>احمد </td>
<td>جمال</td>
<td>ahmedJ@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>علي</td>
<td>بلال</td>
<td>ali@mail.com</td>
</tr>
<tr>
<td>4</td>
<td>سليم</td>
<td>نسيم</td>
<td>snaseem@mail.com</td>
</tr>
</table>
</body>
</html>
المخرجات
يعتبر المحدد :nth-child(N) مفيدًا جدًا في المواقف التي يتعين علينا فيها تحديد العناصر التي تظهر داخل شجرة المستند في موقع او نمط محددة مثل الأماكن الزوجية أو الفردية ، إلخ.
lang:
الفئة الزائفة :lang تسمح بإنشاء المحددات بناءً على إعداد اللغة لعناصر محددة. تحدد الفئة :lang في المثال أدناه علامات الاقتباس لعناصر <q> التي تم منحها صراحة قيمة اللغة no.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:lang</title>
<style>
body {
font-size:20px;
}
q:lang(no) {
quotes:"~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
المخرجات
محددات الفئات و محددات الفئات الزائفة css
يمكن دمج محددات الفئات الزائفة مع محددات الفئات.
الرابط التشعبي الذي يحتوي على السمة class="red" في المثال أدناه سيتم عرضه باللون الأحمر.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo-classes with Selectors</title>
<style>
body {
font-size:22px;
}
a.red:link , a.red:visited {
color: #ff0000;
}
</style>
</head>
<body>
<p>
<a href="#">إضغط هنا</a>
<br><br>
<a href="#" class="red">إضغط هنا</a>
</p>
<p class="red">فقرة من نص </p>
</body>
</html>
المخرجات
