دروس زائفة

بودكاست CSS - 015: الفئات الزائفة

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

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

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

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

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

:hover

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • فَيَرفُكس: 1-
  • Safari: 2-

المصدر

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

:active

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • فَيَرفُكس: 1-
  • Safari: 1-

المصدر

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

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

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • فَيَرفُكس: 1-
  • Safari: 1-

المصدر

إذا كان من الممكن التركيز على عنصر، مثل <button>: فيمكنك التفاعل مع هذه الحالة فئة العملاء الزائفة بعنوان :focus.

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

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

button:focus {
    outline: none;
}

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

button:focus {
    outline: none;
}

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

:target

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • فَيَرفُكس: 1-
  • Safari: الإصدار 1.3.

المصدر

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

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

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

#content:target {
    background: yellow;
}

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

الولايات التاريخية

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • فَيَرفُكس: 1-
  • Safari: 1-

المصدر

: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 {}

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

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

:disabled و:enabled

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • فَيَرفُكس: 1-
  • Safari: الإصدار 3.1.

المصدر

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

:checked و:indeterminate

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • فَيَرفُكس: 1-
  • Safari: الإصدار 3.1.

المصدر

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

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

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

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

:placeholder-shown

دعم المتصفح

  • Chrome: 47.
  • الحافة: 79.
  • Firefox: 51.
  • Safari: 9-

المصدر

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

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

دعم المتصفح

  • Chrome: 10.
  • الحافة: 12.
  • فَيَرفُكس: 4-
  • Safari: الإصدار 5-

المصدر

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

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

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

تحديد العناصر حسب الفهرس وترتيبها وورودها

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

:first-child و:last-child

دعم المتصفح

  • Chrome: 4-
  • الحافة: 12.
  • فَيَرفُكس: 3-
  • Safari: الإصدار 3.1.

المصدر

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

:only-child

دعم المتصفح

  • Chrome: 2-
  • الحافة: 12.
  • Firefox: 1.5.
  • Safari: الإصدار 3.1.

المصدر

يمكنك أيضًا تحديد العناصر التي ليس لها أشقاء، مع من الفئة الزائفة :only-child.

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

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • Firefox: 3.5
  • Safari: الإصدار 3.1.

المصدر

يمكنك تحديد :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>

وخدمة CSS هذه:

.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

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • Firefox: 3.5
  • Safari: الإصدار 3.1.

المصدر

وأنت لا تقتصر على الأطفال الأول والأخير والأنواع أيضًا. إنّ :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.

يمكنك تجربة هذا النوع من أدوات الاختيار في اختبار nth-child أو هذا أداة اختيار الكمية.

:only-of-type

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • Firefox: 3.5
  • Safari: الإصدار 3.1.

المصدر

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

جارٍ البحث عن العناصر الفارغة

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

:empty

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • فَيَرفُكس: 1-
  • Safari: الإصدار 3.1.

المصدر

إذا لم يكن هناك عنصر ثانوي، الفئة الزائفة :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()

دعم المتصفح

  • Chrome: 88.
  • الحافة: 88.
  • Firefox: 78.
  • Safari: 14-

المصدر

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

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

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

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

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

:not()

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • فَيَرفُكس: 1-
  • Safari: الإصدار 3.1.

المصدر

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

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

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

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

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

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

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

صحيح
يُرجى الانتباه إلى استخدام علامة : واحدة أو مزدوجة كحرف مميّز رئيسي في أداة الاختيار.
خطأ
العناصر الزائفة هي للأجزاء، والفئات الزائفة للحالة.

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

:is()
🎉
:target
تشتمل الفئات الصورية الوظيفية على () بعدها، للإشارة إلى قبولها بالمعلَمات.
:empty
تشتمل الفئات الصورية الوظيفية على () بعدها، للإشارة إلى قبولها بالمعلَمات.
:not()
🎉

أي من الفئات الزائفة التالية ترجع إلى تفاعل المستخدم؟

:hover
🎉
:press
يُرجى إعادة المحاولة.
:squeeze
يُرجى إعادة المحاولة.
:target
🎉
:focus-within
🎉

أي مما يلي هو <form> فئات زائفة على مستوى الولاية؟

:enabled
🎉
:fresh
يُرجى إعادة المحاولة.
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
يُرجى إعادة المحاولة.
:valid
🎉