بودكاست 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;
}
التحقّق من استيعابك
اختبر معلوماتك عن الفئات الزائفة
تعمل الفئات الزائفة كما لو تم تطبيق فئة ديناميكيًا على عنصر، بينما تعمل العناصر الزائفة على العنصر نفسه.
:
مفردة أو مزدوجة كحرف رئيسي يميّز في أداة الاختيارأي مما يلي يندرج ضمن فئة زائفة وظيفية؟
:is()
:target
()
بعدها، للإشارة إلى أنّها تقبل المَعلمات.:empty
()
بعدها، للإشارة إلى أنّها تقبل المَعلمات.:not()
أي من الفئات الزائفة التالية تنتج عن تفاعل من جانب المستخدم؟
:hover
:press
:squeeze
:target
:focus-within
أي من الفئات التالية هي <form>
فئات زائفة؟
:enabled
:fresh
:indeterminate
:checked
:in-range
:loading
:valid