العمل مع الفئات الزائفة Pseudo-Classes والعناصر الزائفة Pseudo-Elements في CSS

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

• عندما يكون في حالة نشطة (active).

• عندما يتم تمرير مؤشر الفأرة فوقه (hovered).

• عندما يكون الابن الأول (first child) لعنصر أب (parent).

• عندما يكون الابن الأخير (last child) لعنصر أب (parent).

• عندما يكون الرابط قد تمت زيارته (visited).

• عندما يكون في حالة معطّلة (disabled).

لاستخدام فئة زائفة (pseudo-class)، قم بإضافتها إلى المُحدِّد (selector) باستخدام علامة النقطتين (:) متبوعةً باسم الفئة الزائفة:

selector:pseudo-class {
 /* CSS properties */
}
        

لنستعرض كيف يمكنك استخدام فئة زائفة (pseudo-class) لتمثيل كل حالة من الحالات والمواضع التي ذكرناها سابقاً.

تتيح لك الفئة الزائفة :active تحديد الحالة النشطة (the active state) لعنصر ما، مثل النقر على زر:

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

<button>زر تجريبي</button>
            

button:active {
 background: greenyellow;
}
            

معاينة:

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

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

<a href="#">مرِّر مؤشر الفأرة فوقي!</a>
            

a:hover {
 text-decoration: none;
 color: white;
 background: crimson;
}
            

معاينة:

تُستخدم الفئة الزائفة :first-child لاختيار عنصر يُمثّل الابن الأول (first child) لعنصره الأب (its parent element). إليك مثال على استهداف عنصر الفقرة الأول (first paragraph element) داخل حاوية (container) من نوع div :

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

<div class="container">
 <p>الابن الأول first child</p>
 <p>الابن الثاني second child</p>
 <p>الابن الثالث third child</p>
 <p>الابن الأخير last child</p>
</div>
            

.container p:first-child {
 background: lightcoral;
 padding: 0.4rem;
}
            

معاينة:

سيحصل أول عنصر فقرة (first paragraph element) داخل ذلك الـ div على لون خلفية (background color) بدرجة lightcoral ، بالإضافة إلى هامش داخلي padding مقداره 0.4rem من الجهات الأربع.

تستهدف الفئة الزائفة :last-child العنصر الأخير (the last element) الذي يمثل ابناً لعنصره الأب. إليك مثالًا على استهداف آخر عنصر فقرة (last paragraph element) داخل حاوية (container) من نوع div :

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

<div class="container">
 <p>الابن الأول first child</p>
 <p>الابن الثاني second child</p>
 <p>الابن الثالث third child</p>
 <p>الابن الأخير last child</p>
</div>
            

.container p:last-child {
 background: lightcoral;
 padding: 0.4rem;
}
            

معاينة:

تتيح لك الفئة الزائفة :visited تنسيق رابط سبق للمستخدم زيارته:

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

<a href="https://www.example.com" target="_blank">تفضل بزيارة Example.com</a>
            

a:visited {
 color: purple;
}
            

معاينة:

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

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

<button disabled>زر معطَّل</button>
            

button:disabled {
 background-color: lightgray;
}
            

معاينة:

كما تلاحظ، تتيح لك الفئات الزائفة (pseudo-classes) تنسيق العناصر بناءً على تفاعلات المستخدم، مثل تمرير مؤشر الفأرة فوق عنصر ما أو زيارة رابط؛ مما يضفي طابعاً تفاعلياً أكبر على موقعك الإلكتروني.

بصرف النظر عن الفئات الزائفة (pseudo-classes) التي ذُكرت سابقاً، توجد فئات أخرى مثل:

• :focus

• :first-of-type

• :last-of-type

• :nth-of-type

• :modal

• :enabled

• :checked

• :required ، وأكثر.