الفئات الزائفة Pseudo-classes
ما هي الفئات الزائفة Pseudo-classes ؟
تسمح لنا الفئات الزائفة pseudo-classes بتصميم الحالات الديناميكية لعنصر مثل التمرير hover والحالة النشطة active والتركيز focus ، بالإضافة إلى العناصر الموجودة في شجرة المستند ولكن لا يمكن استهدافها عبر استخدام محددات أخرى دون إضافة معرفات أو فئات لأي منها ، على سبيل المثال ، استهداف العناصر الأبناء الأولى أو الأخيرة لعنصر ما.
تبدأ الفئة الزائفة بنقطتين (:). ويكون بناء الجملة لمحددات الفئات الزائفة بالشكل التالي:
- selector:pseudo-class { property: value };
في هذا الدرس سوف نتعلم الفئات الزائفة الأكثر إستخداما.
الفئات الزائفة للرابط التشعبي
تتيح لنا الفئات الزائفة لعنصر الرابط التشعبي <a> تصميم الروابط بشكل مختلف حسب حالة الرابط . في المثال التالي سنقوم بإزالة التسطير الافتراضي من الرابط التشعبي للروابط التي لم يسبق لنا زيارتها والروابط التي تمت زيارتها.
- a:link , a:visited {
- color: #1db79f;
- text-decoration: none;
- }
بعض فئات الروابط التشعبية الزائفة ديناميكية dynamic يتم تطبيقها كنتيجة لتفاعل المستخدم مع المستند مثل التمرير أو التركيز وما إلى ذلك.
- a:hover , a:active {
- color: #116e60;
- text-decoration: underline;
- }
- a:focus {
- color: red;
- }
تعمل هذه الفئات الزائفة على تغيير كيفية عرض الروابط استجابةً لإجراءات المستخدم.
-
:hoverيتم تطبيقها عندما يضع المستخدم المؤشر فوق العنصر ، لكنه لا يحدده. -
:activeيتم تطبيقها عند تنشيط العنصر أو النقر فوقه. -
:focusيتم تطبيقها عندما يكون العنصر به تركيز لوحة المفاتيح او النقر بزر الفأرة مطولا .
لجعل هذه الفئات الزائفة تعمل بشكل مثالي ، يجب علينا تحديدها بالترتيب التالي -:
:link-
:visited -
:hover -
:active -
:focus
first-child:
تطابق الفئة الزائفة :first-child العنصر الأبن الأول لعنصر آخر. المحدد ol li:first-child في المثال أدناه سيحدد البند الأول من القائمة المرتبة وسيزيل الحد العلوي منه.
- ol li:first-child {
- border-top: none;
- }
last-child:
تطابق الفئة الزائفة :last-child العنصر الإبن الأخير في عنصر آخر. المحدد ul li:last-child في المثال أدناه سيحدد آخر بند في القائمة الغير مرتبة وسيقوم بإزالة الحد الأيسر منه.
- ul li:last-child {
- border-left: none;
- }
nth-child:
في الاصدار الأخير CSS3 تم إضافة فئة زائفة جديدة :nth-child تسمح لنا باستهداف إبن او اكثر لعنصر معين. وتكون بناء الجملة لهذا المحدد هي :nth-child(N) ، حيث N هي وسيط argument والتي يمكن أن تكون رقمًا أو كلمة محجوزة (even أو odd ) أو تعبيرًا xn+y حيث x و y هي أعداد صحيحة (على سبيل المثال ، 1n, 2n, 2n+1, …).
- table tr:nth-child(2n) td {
- background: #eeeeee;
- }
يعتبر المحدد :nth-child(N) مفيدًا جدًا في المواقف التي يتعين علينا فيها تحديد العناصر التي تظهر داخل شجرة المستند في موقع او نمط محددة مثل الأماكن الزوجية أو الفردية ، إلخ.
lang:
الفئة الزائفة :lang تسمح بإنشاء المحددات بناءً على إعداد اللغة لعناصر محددة. تحدد الفئة :lang في المثال أدناه علامات الاقتباس لعناصر <q> التي تم منحها صراحة قيمة اللغة no.
- q:lang(no){
- quotes: "~" "~";
- }
محددات الفئات ومحددات الفئات الزائفة
يمكن دمج محددات الفئات الزائفة مع محددات الفئات.
الرابط التشعبي الذي يحتوي على السمة class="red" في المثال أدناه سيتم عرضه باللون الأحمر.
- a.red:link{
- color: #ff0000;
- }