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