دروس زائفة

The CSS Podcast - 015: Pseudo-classes

لنفترض أنّ لديك نموذج اشتراك عبر البريد الإلكتروني، وتريد أن يظهر حدّ أحمر حول حقل نموذج البريد الإلكتروني إذا كان يحتوي على عنوان بريد إلكتروني غير صالح. كيف يتم ذلك؟ يمكنك استخدام :invalid فئة زائفة في CSS، وهي إحدى الفئات الزائفة العديدة التي يوفّرها المتصفّح.

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

على عكس العناصر الزائفة، التي يمكنك الاطّلاع على مزيد من المعلومات عنها في الوحدة السابقة، ترتبط الفئات الزائفة بحالات معيّنة قد يكون العنصر فيها، بدلاً من وضع نمط عام على أجزاء من هذا العنصر.

الحالات التفاعلية

تنطبق الفئات الزائفة التالية بسبب تفاعل المستخدِم مع صفحتك.

:hover

Browser Support

• 1
• 12
• 1
• 2

Source

إذا كان لدى المستخدم جهاز توجيه مثل الماوس أو لوحة اللمس، ووضعه فوق عنصر، يمكنك الربط بهذه الحالة باستخدام :hover لتطبيق الأنماط. وهذه طريقة مفيدة للإشارة إلى أنّه يمكن التفاعل مع عنصر معيّن.

:active

Browser Support

• 1
• 12
• 1
• 1

Source

يتم تنشيط هذه الحالة عند التفاعل مع عنصر بشكل نشط، مثل النقر، قبل رفع إصبع المستخدم عن العنصر. في حال استخدام جهاز توجيه مثل الماوس، تظهر هذه الحالة عند بدء النقرة ولم يتم تحريرها بعد.

:focus و:focus-within و:focus-visible

Browser Support

• 1
• 12
• 1
• 1

Source

إذا كان بإمكان عنصر تلقّي التركيز، مثل <button>، يمكنك التفاعل مع هذه الحالة باستخدام العنصر الاصطناعي :focus.

يمكنك أيضًا التفاعل إذا تم التركيز على عنصر فرعي من العنصر باستخدام :focus-within.

ستظهر حلقة تركيز حول العناصر التي يمكن التركيز عليها، مثل الأزرار، عند التركيز عليها، حتى عند النقر عليها. في هذا النوع من الحالات، سيطبّق المطوّر ملف CSS التالي:

button:focus {
    outline: none;
}

تزيل خدمة مقارنة الأسعار هذه حلقة التركيز التلقائية للمتصفّح عندما يتلقّى عنصر تركيزًا، ما يشكّل مشكلة في تسهيل الاستخدام للمستخدمين الذين تنقّلون في صفحة ويب باستخدام لوحة مفاتيح. إذا لم يكن هناك نمط تركيز، لن يتمكّن المستخدم من تتبُّع موضع التركيز الحالي عند استخدام مفتاح tab. باستخدام :focus-visible يمكنك عرض نمط تركيز عندما يتلقّى عنصر تركيزًا من خلال لوحة المفاتيح، مع استخدام قاعدة outline: none أيضًا لمنعه عندما يتفاعل معه جهاز مؤشر.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

Browser Support

• 1
• 12
• 1
• 1.3

Source

تختار الفئة الزائفة :target عنصرًا يحتوي على id يتطابق مع جزء من عنوان URL. لنفترض أنّ لديك رمز HTML التالي:

<article id="content">
    …
</article>

يمكنك إرفاق أنماط بهذا العنصر عندما يحتوي عنوان URL على #content.

#content:target {
    background: yellow;
}

ويُعدّ ذلك مفيدًا في إبراز المناطق التي قد تم ربطها تحديدًا، مثل المحتوى الرئيسي على موقع إلكتروني، من خلال رابط للتخطّي.

الحالات السابقة

:link

Browser Support

• 1
• 12
• 1
• 1

Source

يمكن تطبيق الفئة الزائفة :link على أي عنصر <a> يتضمّن قيمة href لم يتم زيارتها بعد.

:visited

يمكنك تصميم رابط سبق للمستخدم زيارته باستخدام الفئة الزائفة :visited. هذه هي الحالة المعاكسة لحالة :link، ولكنّ لديك عددًا أقل من سمات CSS لاستخدامها لسبب الأمان. يمكنك فقط تصميم color وbackground-color border-color وoutline-color وألوان SVG fill وstroke.

مسائل الطلب

إذا حدّدت نمطًا :visited، يمكن إلغاء هذا النمط باستخدام فئة زائفة للرابط ذات درجة تحديد متساوية على الأقل. لهذا السبب، ننصحك باستخدام قاعدة LVHA لتنسيق الروابط باستخدام الفئات الزائفة بترتيب معيّن: :link و:visited و:hover و:active.

a:link {}
a:visited {}
a:hover {}
a:active {}

ملاحظة: لأسباب تتعلق بالأمان، لا يمكنك تغيير الأنماط المحدّدة من خلال :link أو الحالة غير المُزورَة إلا باستخدام الفئة الزائفة :visited، لذا من المهم التأكّد من تحديد الأنماط القابلة للتغيير أولاً. سيساعدك الالتزام بقاعدة LVHA في ذلك.

حالات النموذج

يمكن للفئات الزائفة التالية اختيار عناصر النموذج، في الحالات المختلفة التي قد تكون فيها هذه العناصر أثناء التفاعل معها.

:disabled و:enabled

Browser Support

• 1
• 12
• 1
• 3.1

Source

إذا أوقف المتصفّح عنصر نموذج، مثل <button>، يمكنك الربط بهذه الحالة باستخدام العنصر الاصطناعي :disabled. تتوفّر الفئة الزائفة :enabled للحالة المعاكسة، مع أنّ عناصر النماذج تكون أيضًا :enabled تلقائيًا، لذلك قد لا تحتاج إلى استخدام هذه الفئة الزائفة.

:checked و:indeterminate

Browser Support

• 1
• 12
• 1
• 3.1

Source

تتوفّر الفئة الزائفة :checked عندما يكون عنصر نموذج داعم، مثل مربّع اختيار أو زر اختيار، في حالة محدَّدة بعلامة.

الحالة :checked هي حالة ثنائية(صحيحة أو خاطئة)، ولكنّ مربّعات الاختيار لها حالة بينية عندما لا تكون محدّدة بعلامة أو غير محدّدة بعلامة. ويُعرف هذا باسم حالة :indeterminate.

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

يحتوي العنصر <progress> أيضًا على حالة غير محدّدة يمكن وضع أسلوب لها. ومن حالات الاستخدام الشائعة منح العنصر مظهرًا مخططًا للإشارة إلى أنّه غير معروف مقدار الكمية المطلوبة.

:placeholder-shown

Browser Support

• 47
• 79
• 51
• 9

Source

إذا كان حقل نموذج يتضمّن سمة placeholder وبدون قيمة، يمكن استخدام الفئة الزائفة :placeholder-shown لإرفاق الأنماط بهذه الحالة. ولن تعود هذه الحالة سارية فور ظهور محتوى في الحقل، سواء كان يحتوي على placeholder أم لا.

حالات التحقّق من الصحة

Browser Support

• 10
• 12
• 4
• 5

Source

يمكنك الردّ على عملية التحقّق من صحة نموذج HTML باستخدام فئات زائفة مثل :valid و :invalid و :in-range. تكون الفئات الزائفة :valid و:invalid مفيدة في السياقات مثل حقل البريد الإلكتروني الذي يحتوي على pattern يجب مطابقته، لكي يكون حقلًا صالحًا. يمكن عرض حالة القيمة الصالحة هذه للمستخدم، مساعدته على فهم أنّه يمكنه الانتقال بأمان إلى الحقل التالي.

تتوفّر الفئة الزائفة :in-range إذا كان الإدخال يحتوي على min وmax، مثل إدخال رقمي و تكون القيمة ضمن هذه الحدود.

باستخدام نماذج HTML، يمكنك تحديد أنّ الحقل مطلوب باستخدام السمة required. ستتوفّر الفئة الزائفة :required للحقول المطلوبة. يمكن اختيار الحقول غير المطلوبة باستخدام الفئة الزائفة :optional.

ملاحظة: ليس من المفيد الاعتماد على اللون فقط للإشارة إلى تغييرات الحالة، خاصةً اللونَين الأحمر والأخضر، لأنّ المستخدمين الذين يعانون من عمى الألوان أو ضعف البصر قد يجدون صعوبة في رؤية تغيير الحالة، أو قد لا يلاحظونه على الإطلاق. من الأفكار الجيدة استخدام اللون للإشارة إلى حالات التغيير، بالإضافة إلى التغييرات في النص والرموز للإشارة إلى التغيير بشكل مرئي.

اختيار العناصر حسب مؤشرها وترتيبها ومكان حدوثها

هناك مجموعة من الفئات الزائفة التي تختار العناصر استنادًا إلى مكانها في المستند.

:first-child و:last-child

Browser Support

• 4
• 12
• 3
• 3.1

Source

إذا أردت العثور على العنصر الأول أو الأخير، يمكنك استخدام :first-child و :last-child. ستُعرِض هذه الفئات الزائفة العنصر الأول أو الأخير في مجموعة من العناصر الشقيقة.

:only-child

Browser Support

• 2
• 12
• 1.5
• 3.1

Source

يمكنك أيضًا اختيار العناصر التي لا تتضمّن عناصر شقيقة، باستخدام العنصر الاصطناعي :only-child.

:first-of-type و:last-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

يمكنك اختيار رمزَي :first-of-type و:last-of-type اللذَين يبدوان في البداية أنّهما يؤديان الإجراء نفسه الذي يؤديه رمزا :first-child و:last-child، ولكن فكِّر في رمز HTML التالي:

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

وخدمة مقارنة الأسعار هذه:

.my-parent div:first-child {
    color: red;
}

لن يتم تلوين أي عناصر باللون الأحمر لأنّ العنصر الطفل الأول هو فقرة وليس div. تكون الفئة الزائفة :first-of-type مفيدة في هذا السياق.

.my-parent div:first-of-type {
    color: red;
}

على الرغم من أنّ <div> الأول هو العنصر الثانوي، يبقى هو العنصر الأول من النوع داخل عنصر .my-parent، وبالتالي، سيتمّ تلوينه باللون الأحمر وفقًا لهذه القاعدة.

:nth-child و:nth-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

ولا تقتصر على العناصر الثانوية والأنواع الأولى والأخيرة أيضًا. تسمح لك الفئات الزائفة :nth-child و :nth-of-type بتحديد عنصر في فهرس معيّن. تبدأ الفهرسة في أدوات اختيار CSS من 1.

يمكنك أيضًا تمرير أكثر من فهرس إلى هذه الفئات الزائفة. إذا أردت اختيار كل العناصر الزوجية، يمكنك استخدام :nth-child(even).

يمكنك أيضًا إنشاء أدوات اختيار أكثر تعقيدًا تعثر على العناصر على فترات زمنية منتظمة، باستخدام البنية الدقيقة An+B.

li:nth-child(3n+3) {
    background: yellow;
}

يختار هذا المحدّد كل عنصر ثالث، بدءًا من العنصر 3. القيمة n في هذا التعبير هي الفهرس، ويبدؤه من الصفر، والعدد 3 (3n) هو عدد المرات التي تُضاعف فيها هذا الفهرس.

لنفترض أنّ لديك 7 سلع من النوع <li>. العنصر الأول الذي يتم اختياره هو 3 لأنّ 3n+3 يتم ترجمته إلى (3 * 0) + 3. سيختار التكرار التالي العنصر 6 لأنّ n قد زاد الآن إلى 1، وبذلك (3 * 1) + 3). يعمل هذا التعبير مع كل من :nth-child و:nth-of-type.

يمكنك استخدام هذا النوع من أداة الاختيار في أداة اختبار الطفل n أو أداة اختيار الكمية.

:only-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

أخيرًا، يمكنك العثور على العنصر الوحيد من نوع معيّن في مجموعة من العناصر الشقيقة باستخدام :only-of-type. يكون هذا مفيدًا إذا كنت تريد اختيار قوائم تحتوي على عنصر واحد فقط، أو إذا كنت تريد العثور على العنصر الوحيد المميّز بالخطّ العريض في فقرة.

العثور على العناصر الفارغة

قد يكون من المفيد أحيانًا تحديد العناصر الفارغة تمامًا، وهناك فئة زائفة لذلك أيضًا.

:empty

Browser Support

• 1
• 12
• 1
• 3.1

Source

إذا لم يكن للعنصر عناصر فرعية، تنطبق عليه الفئة الزائفة :empty. لا تقتصر العناصر الفرعية على عناصر HTML أو عقد النصوص، بل يمكن أن تكون أيضًا مسافات بيضاء، ما قد يكون مربكًا عند تصحيح أخطاء رمز HTML التالي والتعجب من عدم عمله مع :empty:

<div>
</div>

والسبب هو أنّ هناك بعض المسافات البيضاء بين <div> الافتتاحي والإغلاق، لذلك لن يعمل الرمز الفارغ.

يمكن أن تكون الفئة الزائفة :empty مفيدة إذا لم يكن لديك تحكم كبير في لغة HTML وأردت إخفاء العناصر الفارغة، مثل محرِّر محتوى WYSIWYG. في هذه الحالة، أضاف محرِّر فقرة فارغة.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

باستخدام :empty، يمكنك العثور على هذا المحتوى وإخفائه.

.post :empty {
    display: none;
}

العثور على عناصر متعددة واستبعادها

تساعدك بعض الفئات الزائفة في كتابة ملف CSS أكثر كثافة.

:is()

Browser Support

• 88
• 88
• 78
• 14

Source

إذا أردت العثور على كل العناصر الفرعية h2 وli وimg في عنصر .post، يمكنك كتابة قائمة محدّد على النحو التالي:

.post h2,
.post li,
.post img {
    …
}

باستخدام الفئة الزائفة :is() ، يمكنك كتابة نسخة أكثر إيجازًا:

.post :is(h2, li, img) {
    …
}

إنّ الفئة الزائفة :is ليست أكثر كثافة من قائمة المحدّدات فحسب، بل هي أكثر تساهلاً أيضًا. في معظم الحالات، إذا حدث خطأ أو تم استخدام أداة اختيار غير متوافقة في قائمة أدوات الاختيار، لن تعمل قائمة أدوات الاختيار بأكملها بعد ذلك. إذا حدث خطأ في المحدّدات التي تم تمريرها في الفئة الصورية :is، سيتم تجاهل المحدّد غير الصالح، ولكن سيتم استخدام المحدّدات الصالحة.

:not()

Browser Support

• 1
• 12
• 1
• 3.1

Source

يمكنك أيضًا استبعاد العناصر باستخدام الفئة الزائفة :not(). على سبيل المثال، يمكنك استخدامها لتنسيق جميع الروابط التي لا تحتوي على سمة class.

a:not([class]) {
    color: blue;
}

يمكن أن تساعدك أيضًا الفئة الزائفة :not في تحسين إمكانية الاستخدام. على سبيل المثال، يجب أن تحتوي العلامة <img> على alt، حتى لو كانت قيمة فارغة، كي تتمكّن من كتابة قاعدة CSS تضيف مخطّطًا أحمر سميكًا إلى الصور غير الصالحة:

img:not([alt]) {
    outline: 10px red;
}

التحقّق من فهمك

اختبِر معلوماتك حول الفئات الزائفة

تعمل الفئات الزائفة كما لو تم تطبيق فئة ديناميكيًا على عنصر، في حين تعمل العناصر الزائفة على العنصر نفسه.

True

انتبه إلى استخدام : مفرد أو مزدوج كحرف مميز رئيسي في أداة الاختيار.

خطأ

العناصر الزائفة مخصّصة للأجزاء، والطبقات الزائفة مخصّصة للحالة.

أي مما يلي فئة زائفة وظيفية؟

:is()

🎉

:target

تظهر العلامات الزائفة الوظيفية بعد () للإشارة إلى أنّها تقبل المَعلمات.

:empty

تظهر العلامات الزائفة الوظيفية بعد () للإشارة إلى أنّها تقبل المَعلمات.

:not()

🎉

أيّ من الفئات الزائفة التالية ناتج عن تفاعل المستخدِم؟

:hover

🎉

:press

يُرجى إعادة المحاولة.

:squeeze

يُرجى إعادة المحاولة.

:target

🎉

:focus-within

🎉

أيّ مما يلي هو فئات زائفة لحالة <form>؟

:enabled

🎉

:fresh

يُرجى إعادة المحاولة.

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

يُرجى إعادة المحاولة.

:valid

🎉