الفئات والعناصر الزائفة

تعريف الفئات الزائفة (Pseudo-classes) : هي كلمات مفتاحية (keywords) خاصة في لغة CSS تتيح لك اختيار عنصر بناءً على حالته (state) أو موقعه (position) المحدد.

الفئات الزائفة الخاصة بإجراءات المستخدم (User Action Pseudo-classes) : هي كلمات مفتاحية خاصة تتيح لك تغيير مظهر العناصر بناءً على تفاعلات المستخدم، مما يعزز تجربة المستخدم ككل.

الفئة الزائفة :active : تتيح لك هذه الفئة الزائفة تحديد الحالة النشطة لعنصر ما، مثل حالة النقر على زر.

الفئة الزائفة :hover : تُحدد هذه الفئة الزائفة حالة العنصر عند تمرير مؤشر الفأرة فوقه.

الفئة الزائفة :focus : تُطبِّق هذه الفئة الزائفة أنماطاً (styles) عندما يكتسب عنصرٌ ما التركيز (focus)، ويحدث ذلك عادةً من خلال التنقل عبر لوحة المفاتيح أو عندما ينقر المستخدم داخل حقل إدخال في نموذج.

الفئة الزائفة :focus-within : تُستخدم هذه الفئة الزائفة لتطبيق أنماط على عنصر ما عندما يكتسب هذا العنصر - أو أيّ من العناصر التابعة له - التركيز (focus).

الفئات الزائفة لعناصر الإدخال (Input Pseudo-classes) : تُستخدم هذه الفئات الزائفة لاستهداف عناصر الإدخال input في لغة HTML بناءً على حالتها قبل وبعد تفاعل المستخدم معها.

الفئة الزائفة :enabled : تُستخدم هذه الفئة الزائفة لاستهداف أزرار النماذج أو العناصر الأخرى المُمكَّنة (enabled) حالياً.

الفئة الزائفة :disabled : تتيح لك هذه الفئة الزائفة تنسيق عنصر تفاعلي في حالة التعطيل (disabled mode).

الفئة الزائفة :checked : تُستخدم هذه الفئة الزائفة للإشارة للمستخدم إلى أن العنصر مُحدَّد (مُؤشَّر عليه).

الفئة الزائفة :valid : تستهدف هذه الفئة الزائفة حقول الإدخال التي تستوفي معايير التحقق.

الفئة الزائفة :invalid : تستهدف هذه الفئة الزائفة حقول الإدخال التي لا تستوفي معايير التحقق.

الفئتان الزائفتان :in-range و :out-of-range : تُطبِّق هاتان الفئتان الزائفتا التنسيقات على العناصر بناءً على ما إذا كانت قيمها تقع ضمن قيود النطاق المحددة أو خارجها.

الفئة الزائفة :required : تستهدف هذه الفئة الزائفة عناصر الإدخال input التي تحمل السمة required. وهي تشير للمستخدم إلى ضرورة ملء هذا الحقل حتى يتمكن من إرسال النموذج.

الفئة الزائفة :optional : تُطبِّق هذه الفئة الزائفة أنماطاً على عناصر الإدخال (input elements) غير المطلوبة، والتي يمكن تركها فارغة.

الفئة الزائفة :autofill : تُطبِّق هذه الفئة الزائفة أنماطاً على حقول الإدخال التي يقوم المتصفح بملئها تلقائياً باستخدام بيانات محفوظة.

الفئات الزائفة الخاصة بالموقع Location Pseudo-classes : تُستخدم هذه الفئات الزائفة لتنسيق الروابط والعناصر المُستهدفة داخل المستند الحالي.

الفئة الزائفة :any-link : تجمع هذه الفئة الزائفة بين الفئتين الزائفين :link و :visited ؛ فهي تطابق أي عنصر رابط (anchor element) يحتوي على السمة href ، بغض النظر عما إذا كان قد تمت زيارته أم لا.

الفئة الزائفة :link : تتيح لك هذه الفئة الزائفة استهداف جميع الروابط التي لم تتم زيارتها في صفحة الويب. يمكنك استخدامها لتنسيق الروابط بشكل مختلف قبل أن يقوم المستخدم بالنقر عليها.

الفئة الزائفة :local-link : تستهدف هذه الفئة الزائفة الروابط التي تشير إلى المستند نفسه. وتعد مفيدة عندما ترغب في التمييز بين الروابط الداخلية والروابط الخارجية.

الفئة الزائفة :visited : تستهدف هذه الفئة الزائفة رابطاً قام المستخدم بزيارته.

الفئة الزائفة :target : تُستخدم هذه الفئة الزائفة لتطبيق أنماط على عنصر يُمثّل الهدف (target) لجزءٍ مُحدَّد في رابط (URL fragment).

الفئات الزائفة ذات البنية الشجرية (Tree-structural Pseudo-classes) : تتيح لك هذه الفئات الزائفة استهداف العناصر وتنسيقها بناءً على موقعها ضمن شجرة المستند (document tree).

الفئة الزائفة :root : تشير هذه الفئة الزائفة عادةً إلى العنصر الجذري html في المستند. وهي تتيح لك استهداف المستوى الأعلى في المستند، مما يمكنك من تطبيق نمط موحد على المستند بأكمله.

الفئة الزائفة :empty : تُدرج العناصر الفارغة — أي العناصر التي لا تحتوي على أي أبناء سوى مسافات بيضاء — ضمن شجرة المستند؛ ولهذا السبب وُجدت الفئة الزائفة :empty لاستهداف هذه العناصر الفارغة.

الفئة الزائفة :nth-child(n) : تتيح لك هذه الفئة الزائفة اختيار العناصر بناءً على موقعها ضمن عنصر أب (parent).

الفئة الزائفة :nth-last-child(n) : تتيح لك هذه الفئة الزائفة اختيار العناصر عن طريق العدّ بدءاً من النهاية.

الفئة الزائفة :first-child : تختار هذه الفئة الزائفة العنصر الأول ضمن عنصر أب (parent element) أو داخل المستند.

الفئة الزائفة :last-child : تختار هذه الفئة الزائفة العنصر الأخير ضمن عنصر أب (parent element) أو داخل المستند.

الفئة الزائفة :only-child : تختار هذه الفئة الزائفة العنصر الوحيد الموجود داخل عنصر أب (parent element) أو داخل المستند.

الفئة الزائفة :first-of-type : تختار هذه الفئة الزائفة أول ظهور لنوعٍ معين من العناصر ضمن عنصره الأب (its parent).

الفئة الزائفة :last-of-type : تختار هذه الفئة الزائفة التكرار الأخير لنوع عنصر معين ضمن عنصره الأب (its parent).

الفئة الزائفة :nth-of-type(n) : تتيح لك هذه الفئة الزائفة اختيار عنصرٍ محددٍ داخل عنصره الأب (its parent)، وذلك بناءً على موقعه بين العناصر الشقيقة التي تنتمي إلى النوع ذاته (same type).

الفئة الزائفة :only-of-type : تختار هذه الفئة الزائفة عنصراً ما إذا كان هو العنصر الوحيد من نوعه ضمن عنصره الأب (its parent).

الفئات الزائفة الوظيفية (Functional Pseudo-classes) : تتيح لك الفئات الزائفة الوظيفية اختيار العناصر بناءً على شروط أو علاقات أكثر تعقيداً. وعلى عكس الفئات الزائفة العادية التي تستهدف العناصر بناءً على حالة معينة (مثل :hover أو :focus)، فإن الفئات الزائفة الوظيفية تقبل تمرير وسائط (arguments) إليها.

الفئة الزائفة :is() : تقبل هذه الفئة الزائفة قائمةً من المُحدِّدات (مثل ol ، ul) وتختار أي عنصرٍ يطابق واحداً من المُحدِّدات الموجودة في تلك القائمة.

<link rel="stylesheet" href="styles.css">

<p class="example">سيتغير لون هذا النص.</p>
<p>لن يتغير لون هذا النص.</p>
<p>لن يتغير لون هذا النص.</p>
<p class="this-works-too">سيتغير لون هذا النص.</p>
                

p:is(.example, .this-works-too) {
 color: red;
}
                        

معاينة:

الفئة الزائفة :where() : تقبل هذه الفئة الزائفة قائمةً من المُحدِّدات (مثل ol ، ul) وتختار أي عنصر يطابق واحداً منها. ويكمن الفرق بين :is() و :where() في أن الأخيرة تمتلك قيمة "تحديد" (specificity) تساوي 0.

:where(h1, h2, h3) {
 margin: 0;
 padding: 0;
}
                    

الفئة الزائفة :has() : يُطلق على هذه الفئة الزائفة غالبًا اسم مُحدِّد "العنصر الأب" (parent selector)؛ لأنها تتيح لك تنسيق العناصر التي تحتوي بداخلها على عناصر فرعية مُحدَّدة ضمن قائمة المُحدِّدات.

article:has(h2) {
 border: 2px solid hotpink;
}
                    

الفئة الزائفة :not() : تُستخدم هذه الفئة الزائفة لاختيار العناصر التي لا تطابق المُحدِّد المُقدَّم.

p:not(.example) {
 color: blue;
}
                    

العنصر الزائف ::before : يستخدم هذا العنصر الزائف الخاصية content لإدراج محتوى تجميلي، مثل الأيقونات، مباشرةً قبل العنصر.

العنصر الزائف ::after : يستخدم هذا العنصر الزائف الخاصية content لإدراج محتوى تجميلي، مثل الأيقونات، مباشرةً بعد العنصر.

العنصر الزائف ::first-letter : يستهدف هذا العنصر الزائف الحرف الأول من محتوى أحد العناصر، مما يتيح لك تنسيقه.

العنصر الزائف ::marker : يتيح لك هذا العنصر الزائف تحديد العلامة (نقطة أو رقم) الخاصة بعناصر القائمة، وذلك بهدف تنسيقها.