فئات الحالة الزائفة هي أدوات تستخدم لتحديد حالة خاصة لعناصر الـ HTML.
على سبيل المثال، يمكن استخدامها لتحقيق الآتي:
- تنسيق عنصر عند تحريك مؤشر الماوس فوقه
- تنسيق الروابط التي تمت زيارتها بشكل مختلف عن الروابط التي لم تتم زيارتها
- تنسيق عنصر عند حصوله على التركيز (الاستفاد)
قواعد البناء – Syntax
قواعد بناء فئات الحالة الزائفة (Pseudo-classes syntax):
selector:pseudo-class {
property: value;
}
فئات الحالة الزائفة للروابط (Anchor Pseudo-classes)
تُمكن فئات الحالة الزائفة للروابط من عرض الروابط بطرق مختلفة.
فيما يلي بعض الأمثلة:
- :link: تحدد هذه الفئة جميع الروابط غير المزورة.
- :visited: تحدد هذه الفئة جميع الروابط التي تم زيارتها مسبقًا.
- :active: تحدد هذه الفئة الرابط الذي يتم النقر عليه حاليًا.
- :hover: تحدد هذه الفئة الرابط الذي يتم تحريك مؤشر الماوس فوقه.
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
ملاحظة: يجب أن تأتي الفئة “:hover” بعد الفئتين “:link” و “:visited” في تعريف CSS لكي تعمل بشكل فعّال. وبالمثل، يجب أن تأتي الفئة “:active” بعد الفئة “:hover” لتعمل بشكل صحيح. أسماء فئات الحالة الزائفة غير حساسة لحالة الأحرف (يمكن كتابتها بأحرف كبيرة أو صغيرة).
فئات الحالة الزائفة (Pseudo-classes) والـفئات الخاصة بـ HTML (HTML Classes)
يمكن دمج فئات الحالة الزائفة مع الفئات الخاصة بـ HTML لتحقيق المزيد من التحكم بالتنسيق.
على سبيل المثال:
في حالة تحريك مؤشر الماوس فوق الرابط بالمثال التالي، سيتغير لونه:
a.highlight:hover {
color: #ff0000;
}
تحريك مؤشر الماوس فوق عنصر <div>
مثال على استخدام الفئة الزائفة “:hover” على عنصر <div>:
div:hover {
background-color: blue;
}
تحويم على صندوق نص لإظهار نص مساعدة (Tooltip)
عند تحريك مؤشر الماوس فوق عنصر <div>, سيظهر عنصر <p> يعمل كـ “نص مساعدة” (Tooltip).
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
CSS – فئة الحالة الزائفة :first-child
تُستخدم فئة الحالة الزائفة “:first-child” لتحديد عنصر معيّن يكون الابن الأول لعنصر آخر.
على سبيل المثال: تحديد أول عنصر <p>
في المثال التالي، يطابق المُحدّد أي عنصر <p> يعتبر الابن الأول لأي عنصر:
p:first-child {
color: blue;
}
تحديد أول عنصر <i> داخل جميع عناصر <p>
في المثال التالي، يطابق المُحدّد أول عنصر <i> الموجود ضمن كل عنصر <p>.
p i:first-child {
color: blue;
}
تحديد جميع عناصر <i> داخل جميع عناصر <p> التي تعتبر الابن الأول لعنصر آخر
في المثال التالي، يطابق المُحدّد كافة عناصر <i> الموجودة داخل عناصر <p> التي تعتبر الابن الأول لأي عنصر آخر.
p:first-child i {
color: blue;
}
CSS – فئة الحالة الزائفة :lang
تتيح لك فئة الحالة الزائفة “:lang” تعريف قواعد خاصة للغات مختلفة.
في المثال التالي، تحدد “:lang” علامات الاقتباس لعناصر <q> التي تحتوي على الخاصية lang=”no”:
<html>
<head>
<style>
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
| فئة الحالة الزائفة | مثال | وصف المثال |
|---|---|---|
| :active | a:active | يحدد الرابط النشط |
| :checked | input:checked | يحدد كل عنصر <input> محدد |
| :disabled | input:disabled | يحدد كل عنصر <input> معطل |
| :empty | p:empty | يحدد كل عنصر <p> لا يحتوي على عناصر فرعية |
| :enabled | input:enabled | يحدد كل عنصر <input> مفعّل |
| :first-child | p:first-child | يحدد جميع عناصر <p> التي هي الابن الأول للعنصر الأب |
| :first-of-type | p:first-of-type | يحدد جميع عناصر <p> التي هي أول عنصر <p> للعنصر الأب |
| :focus | input:focus | يحدد عنصر <input> الذي عليه التركيز |
| :hover | a:hover | يحدد الروابط عند تحريك الماوس فوقها |
| :in-range | input:in-range | يحدد عناصر <input> بقيمة ضمن مدى محدد |
| :invalid | input:invalid | يحدد جميع عناصر <input> بقيمة غير صالحة |
| :lang(language) | p:lang(it) | يحدد كل عنصر <p> بقيمة سمة “lang” تبدأ بـ “it” |
| :last-child | p:last-child | يحدد جميع عناصر <p> التي هي الابن الأخير للعنصر الأب |
| :last-of-type | p:last-of-type | يحدد جميع عناصر <p> التي هي آخر عنصر <p> للعنصر الأب |
| :link | a:link | يحدد جميع الروابط غير المزورة |
| :not(selector) | :not(p) | يحدد كل عنصر ليس عنصر <p> |
| :nth-child(n) | p:nth-child(2) | يحدد كل عنصر <p> هو الابن الثاني للعنصر الأب |
| :nth-last-child(n) | p:nth-last-child(2) | يحدد كل عنصر <p> هو الابن الثاني للعنصر الأب، مع العد من الابن الأخير |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | يحدد كل عنصر <p> هو ثاني عنصر <p> للعنصر الأب، مع العد من الابن الأخير |
| :nth-of-type(n) | p:nth-of-type(2) | يحدد كل عنصر <p> هو ثاني عنصر <p> للعنصر الأب |
| :only-of-type | p:only-of-type | يحدد كل عنصر <p> هو العنصر الوحيد من نوع <p> للعنصر الأب |
| :only-child | p:only-child | يحدد كل عنصر <p> هو الابن الوحيد للعنصر الأب |
| :optional | input:optional | يحدد عناصر <input> بدون سمة “required” |
| :out-of-range | input:out-of-range | يحدد عناصر <input> بقيمة خارج مدى محدد |
| :read-only | input:read-only | يحدد عناصر <input> مع سمة “readonly” محددة |
| :read-write | input:read-write | يحدد عناصر <input> بدون سمة “readonly” |
| :required | input:required | يحدد عناصر <input> مع سمة “required” محددة |
| :root | root | يحدد عنصر الجذر للمستند |
| :target | #news:target | يحدد عنصر #news النشط الحالي (تم النقر على عنوان URL يحتوي على اسم الرابط) |
| :valid | input:valid | يحدد جميع عناصر <input> بقيمة صالحة |
| :visited | a:visited | يحدد جميع الروابط التي تمت زيارتها |
جميع عناصر الحالة الزائفة في CSS
| عنصر الحالة الزائفة | مثال | وصف المثال |
|---|---|---|
| ::after | p::after | إدراج محتوى بعد كل عنصر <p> |
| ::before | p::before | إدراج محتوى قبل كل عنصر <p> |
| ::first-letter | p::first-letter | تحديد الحرف الأول لكل عنصر <p> |
| ::first-line | p::first-line | تحديد السطر الأول لكل عنصر <p> |
| ::marker | ::marker | تحديد العلامات الخاصة بعناصر القائمة ( نقط أو رقم أو غيره) |
| ::selection | p::selection | تحديد الجزء المحدد من قبل المستخدم داخل عنصر <p> |
