دروس زائفة

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

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

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

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

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

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

:hover

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

:active

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

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

إذا كان من الممكن التركيز على عنصر ما، مثل <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

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

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

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

#content:target {
    background: yellow;
}

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

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

:link

يمكن تطبيق الفئة الزائفة :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

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

:checked و:indeterminate

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

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

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

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

:placeholder-shown

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

حالات التحقق

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

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

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

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

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

:first-child و:last-child

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

:only-child

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

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

يمكنك اختيار :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

حيث لا تقتصر على الأطفال الأول والأخير والأنواع أيضًا. تتيح لك الفئتان الزائفة :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.

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

:only-of-type

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

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

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

:empty

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

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

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

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

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

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

:not()

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

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

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

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

التحقّق من استيعابك

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