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

الفئة الزائفة :focus

تتيح لك الفئة الزائفة 0 استهداف عنصر إدخال (input element) عندما يقوم المستخدم بتحديده أو النقر عليه، مما يسلط الضوء على حقل الإدخال النشط (active input field). ويساعد ذلك المستخدمين على معرفة المكان الذي يكتبون فيه حالياً بكل سهولة:

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

<form>
 <input type="text" />
</form>
            

input:focus {
 border: 2px solid crismon;
 outline: none;
}
            

معاينة:

الفئة الزائفة :hover

كما يوحي الاسم، يتم تفعيل الفئة الزائفة :hover عندما يضع المستخدم مؤشر الفأرة فوق أحد العناصر. وهي توفر تغذية راجعة مرئية (visual feedback) قبل أن يتفاعل المستخدم مع العنصر، مما ينبهه بفعالية إلى أن هذا العنصر جاهز للاستخدام.

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

<form>
 <input type="text" />
</form>
            

input:hover {
 background-color: orange;
}
            

معاينة:

في المثال أعلاه، يتغير خلفية عنصر الإدخال إلى اللون البرتقالي عندما يحوم المستخدم فوقه، مما يخبره بأن الحقل جاهز للتفاعل.

الفئة الزائفة :checked

تتيح لك الفئة الزائفة :checked تنسيق زر الاختيار (radio button) أو مربع الاختيار (checkbox) بشكل مختلف عند قيام المستخدم بتحديده؛ مما يسهّل على المستخدم معرفة الخيار الذي قام باختياره.

إليك مثال يتضمن مربع اختيار (checkbox) للموافقة على الشروط في أحد المواقع الإلكترونية.

ملاحظة: يستخدم بعض كود CSS في هذا المثال خصائص لم نتناولها بعد. الغرض من ذلك هو فقط إعطاؤك فكرة عن كيفية إنشاء مربع اختيار (checkbox) مخصص. ستتعلم تفاصيل عمل كل هذا في الدروس وورش العمل القادمة.

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

<form>
 <label>
  موافق
  <input class="checkbox" type="checkbox" />
 </label>
</form>
                

.checkbox {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 4px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all 0.25s ease;
vertical-align: middle;
}

.checkbox:hover {
border-color: #888;
}

.checkbox:checked {
background-color: #4caf50;
border-color: #4caf50;
}

.checkbox:checked::after {
content: "";
position: absolute;
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

.checkbox:focus {
outline: 2px solid #90caf9;
outline-offset: 2px;
}
                

معاينة:

الفئة الزائفة :required

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

إليك مثالًا مع نموذج يحتوي على بعض حقول الإدخال المطلوبة:

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

<form action="#">
 <label for="name">الاسم:</label>
 <input type="text" id="name" name="name" required />
 
 <label for="email">البريد الإلكتروني:</label>
 <input type="email" id="email" name="email" required />

 <label for="phone">رقم الهاتف:</label>
 <input type="tel" id="phone" name="phone" />
 
 <button type="submit">إرسال</button>
</form>
                

input:required {
 border: 2px solid orange;
}
                

معاينة:

الفئتان الزائفتان :valid و :invalid

عند التحقق من صحة النماذج (validating forms)، يمكنك استخدام الفئة الزائفة (pseudo-class) :valid لتنسيق حقول الإدخال التي تستوفي معايير التحقق، واستخدام :invalid لتنسيق الحقول التي لا تستوفي تلك المعايير. وعادةً ما يُستخدم اللون الأخضر للإشارة إلى المدخلات الصحيحة (valid input)، واللون الأحمر للإشارة إلى المدخلات غير الصحيحة (invalid input).

إليك مثال يستخدم الفئة الزائفة :valid :

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

<form>
 <label for="email">البريد الإلكتروني:</label>
 <input type="email" id="email" name="email" />
</form>
            

input:valid {
 border-color: green;
}
            

معاينة:

إليك مثال يستخدم الفئة الزائفة :invalid :

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

<form>
 <label for="email">البريد الإلكتروني:</label>
 <input type="email" id="email" name="email" />
</form>
            

input:invalid {
 border-color: crimson;
}
            

معاينة:

الفئة الزائفة :disabled

تتيح لك الفئة الزائفة :disabled تحديد عناصر الإدخال (input elements) المعطّلة وتنسيقها. تحتوي هذه العناصر على السمة disabled التي تمنع المستخدمين من التفاعل معها؛ فعندما يكون عنصر الإدخال معطّلاً، لا يمكن النقر عليه، أو توجيه التركيز إليه، أو تعديله.

إليك مثال على عنصر تسمية (label) وعنصر إدخال (input) معطَّل.

في ملف CSS، نستهدف عنصر الإدخال (input) المعطَّل، ونضبط لون خلفيته على الرمادي الفاتح lightgray، ونغيّر شكل مؤشر الفأرة إلى النمط الذي يشير إلى عدم السماح بالإجراء not-allowed.

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

<form>
 <label for="name">الاسم:</label>
 <input class="text-input" type="text" id="name" name="name" disabled />
</form>
            

.text-input:disabled {
 background-color: lightgray;
 cursor: not-allowed;
}
            

معاينة:

تُغيِّر قيمة cursor: not-allowed; في لغة CSS مظهر مؤشر الفأرة، وذلك للإشارة إلى أن إجراءً ما غير مسموح به (not permitted).

عند تطبيقها على عنصر، تعرض مؤشرًا برمز دائرة مع شريط مائل (عادة دائرة مع خط قطري) لتنبيه المستخدمين أن العنصر غير تفاعلي أو لا يمكن النقر عليه أو التفاعل معه.

فئات زائفة أخرى خاصة بعناصر الإدخال

إليك بعض الأمثلة الأخرى على الفئات الزائفة (pseudo-classes) الخاصة بعناصر الإدخال (input) وما تقوم به:

• :autofill : تُطبِّق أنماطاً على حقول الإدخال التي يملؤها المتصفح تلقائياً ببياناتٍ محفوظة (with saved data).

• :optional : تُستخدم لتنسيق عناصر الإدخال (input elements) غير المطلوبة، والتي يمكن تركها فارغة.

• :in-range و :out-of-range : تُستخدم لتنسيق العناصر بناءً على ما إذا كانت قيمها (their values) تقع ضمن قيود نطاق محددة أو خارجها.