البحث في الموقع

لا يخفى على أي مطور ويب أنّ الفئات الزائفة تُعتبر مهمة في تطوير المواقع وأنّه يجب على كل مطور ويب معرفتها ومعرفة كيفية عملها حتى يستطيع استخدامها متى ما احتاج إليها. وأكاد أجزم أنّه لا يوجد موقع لا يستخدم الفئات الزائفة مهما كان حجم هذا الموقع. لذلك في هذا الدرس سوف نتحدث عن 5 فئات زائفة وكيفية عملها مع طرح بعض الأمثلة للمساعدة على الفهم بشكل أفضل. :first-childتُعتبر هذه الفئة واحدة من أكثر الفئات الزائفة استخدامًا على الاطلاع، وما تقوم به هذه الفئة هو تحديد واختيار عنصر إبن ولكن بشرط أن يكون هذا العنصر هو الإبن الأول للعنصر الأب. دعونا نأخذ مثالًا بسيطًا حتى يتضح الأمر بشكل أفضل. تخيّل معي الشيفرة البرمجية التالية: <article> <p> Lorem Ipsum... </p> <p> Another Lorem Ipsum... </p> </article>p:first-child { font-size: 1.5em; }في هذا المثال سوف يتم تغيير حجم الخط فقط للعنصر <p> الأول (الذي يحتوي على النص "Lorem Ipsum...") وذلك لأنه هو العنصر الإبن الأول للعنصر الأب <article>. لنأخذ مثالًا آخر: <div class="container"> <h1>Heading</h1> <p> Lorem Ipsum... </p> </div>p:first-child { font-size: 1.5em; }في هذا المثال لن يتم تغيير حجم الخط للعنصر <p> وذلك لأنه ليس العنصر الإبن الأول، فكما ترون أنّ العنصر الإبن الأول هو <h1> وليس <p>. بعض الملاحظاتكما رأينا في المثال الأخير أننا لم نستطع تنسيق (تغيير حجم الخط باستخدام font-size) العنصر <p> باستخدام العنصر الزائف :first-child وذلك لأنّ هذا العنصر لم يكن هو العنصر الإبن الأول، لذلك وحتى نستطيع تنسيق هذا العنصر فإننا سوف نحتاج إلى استعمال فئة زائفة أخرى وهي :first-of-type، فهذه الفئة كما يُشير اسمها فإنّها تقوم باختيار عُنصر إبن ولكن بشرط أن يكون هو العنصر الأول من نوعه داخل العنصر الأب. ففي المثال الأول لن يتغير أي شيء لأن تأثير :first-child و:first-of-type سيكون هو نفسه نظرًا لأنّ العنصر <p> هو أول عنصر إبن (وسوف يتم اختياره من قبل :first-child) وهو كذلك العنصر الأول من نوعه داخل العنصر الأب (وسوف يتم اختياره من قبل :first-of-type). سوف نتحدث عن هذه الفئة الزائفة لاحقًا في هذا الدرس. شيء آخر يجب عليك معرفته هو أنّ الفئة الزائفة :first-child حالها كحال الفئات الزائفة الأخرى يمكن استخدامها مع محددات (selectors) أخرى مثل :hover و::before (فمثلًا يمكنك القيام بشيء مشابه لهذا p:first-child:hover). أمثلة إضافيةتخيل معي شيفرة HTML التالية: <article> <h1>Understanding :first-child</h1> <p> This is the first paragraph, but it's not the first child of its parent. </p> <p> This is another paragraph. <span>This is a span inside the paragraph.</span> </p> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> </ul> </article>وتخيل معي تنسيقات CSS التالية: span:first-child { color: grey; }هنا سوف يتم تغيير لون الخط الخاص بالعنصر <span> والموجود في العنصر <p> إلى اللون الرمادي (grey) وذلك لأنّ العنصر <span> هو العنصر الإبن الأول للعنصر <p>. لنأخذ تنسيقات CSS أخرى: li:first-child { text-decoration: underline; color: deepPink; }هنا سوف يتم تحديد العنصر <li> الأول وسوف يتم اعطاؤه التنسيقات text-decoration: underline وcolor: deepPink. تنسيقات أخرى: p:first-child { font-size: 1.5em; }هنا لن يتم تحديد أي عنصر <p> وبالتالي لن يتم تطبيق الخاصية font-size: 1.5em ويعود السبب في ذلك إلى أننا نملك عنصرين <p> ولكن لا عنصر من هذين العنصر هو الإبن الأول للعنصر <article> فبالرجوع إلى شيفرة HTML يمكنك ملاحظة أن العنصر الأول هو <h1>. وأخيرًا وليس آخرًا: span:first-child::before { content: "("; color: deepPink; } span:first-child::after { content: ")"; color: deepPink; } لاحظ في هذا المثال أننا استخدمنا ::before و::after مع الفئة الزائفة :first-child ففي هذا المثال سوف يتم وضع محتويات العنصر <span> داخل قوسين لونهما زهري. يمكنك معاينة جميع الأمثلة السابقة من هنا. دعم المتصفحاتالعنصر الزائف :first-child مدعوم في كل المتصفحات تقريبًا فهو مدعوم في Chrome، Firefox، Safari، Opera 9.5+، Internet Explorer 7+ وفي متصفحات Android وiOS. ملاحظة: في متصفح Internet Explorer 8 إذا تم إدخال عنصر ما بشكل ديناميكي عن طريق النقر على رابط ما فإنّ الفئة الزائفة :first-class لن يتم تطبيقها حتى يذهب الـfocus عن الرابط. :last-childجميع ما ذكرناه عن الفئة الزائفة :first-child ينطبق على الفئة الزائفة :last-child ولكن بدلًا من جملة "الإبن الأول" استخدم "الإبن الأخير"، هكذا بكل بساطة. ولكن هل تذكر عندما تحدثنا عن :first-of-type وقلنا بأنّ هذه الفئة تقوم باختيار عُنصر إبن ولكن بشرط أن يكون هو العنصر الأول من نوعه داخل العنصر الأب؟ على نفس المنوال هناك الفئة الزائفة :last-of-type وهذه الفئة تقوم باختيار عُنصر إبن ولكن بشرط أن يكون هو العنصر الأخير من نوعه داخل العنصر الأب (سوف نتحدث عنها لاحقًا في هذا الدرس). دعونا ننتقل الآن مباشرة إلى بعض الأمثلة. بعض الأمثلةتخيل معي شيفرة HTML التالية: <article> <h1>Understanding :last-child</h1> <p> This is the first paragraph, but it's not the first child of its parent. </p> <p> This is another paragraph. <span>This is a span inside the paragraph.</span> </p> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> </ul> </article>وتخيل معي تنسيقات CSS التالية: span:last-child { color: grey; }هنا سوف يتم تغيير لون الخط الخاص بالعنصر <span> والموجود في العنصر <p> إلى اللون الرمادي (grey) وذلك لأنّ العنصر <span> هو العنصر الإبن الأخير للعنصر <p> (في الحقيقة هذا العنصر هو العنصر الأول والأخير للعنصر <p> لأنه العنصر الإبن الوحيد ولذلك يمكننا استخدام :first-child أو:last-child). لنأخذ تنسيقات CSS أخرى: li:last-child { text-decoration: underline; color: deepPink; }هنا سوف يتم تحديد العنصر <li> الأخير وسوف يتم اعطاؤه التنسيقات text-decoration: underline وcolor: deepPink. تنسيقات أخرى: p:last-child { font-size: 1.5em; }هنا لن يتم تحديد أي عنصر <p> وبالتالي لن يتم تطبيق الخاصية font-size: 1.5em ويعود السبب في ذلك إلى أننا نملك عنصرين <p> ولكن لا عنصر من هذين العنصر يُعتبر الإبن الأخير للعنصر <article> فبالرجوع إلى شيفرة HTML يمكنك ملاحظة أن العنصر الأخير هو <ul>. مثال أخير: span:last-child::before { content: "("; color: deepPink; } span:last-child::after { content: ")"; color: deepPink; }لاحظ في هذا المثال أننا استخدمنا ::before و::after مع الفئة الزائفة :last-child ففي هذا المثال سوف يتم وضع محتويات العنصر <span> داخل قوسين لونهما زهري. يمكنك معاينة جميع الأمثلة السابقة من هنا. دعم المتصفحاتإنّ دعم المتصفحات للفئة الزائفة :last-child أقل من دعمها للفئة الزائفة :first-child فهي مدعومة في متصفحات Chrome، Firefox، Safari، Opera 9.5+، Internet Explorer 9+ وفي متصفحات Android وiOS (لاحظ أنّ الفرق في الدعم هو أنها غير مدعومة في متصفح IE 8 وIE 7). :first-of-typeتقوم هذه الفئة بتحديد أول ظهور لأحد العناصر الإبن الموجودة في عنصر أب، أي أنّه لا يشترط -كما كان الحال في :first-child- أن يكون العنصر هو الإبن الأول للعنصر الأب. دعونا نأخذ مثالًا بسيطًا: <article> <h1>Article Title</h1> <p> First paragraph. </p> <p> Second paragraph. </p> <!-- .... --> </article>p:first-of-type { font-size: 1.5em; } ففي هذا المثال سوف يتم تحديد العنصر <p> الذي يحتوي على النص "First paragraph" وذلك لأنه هو أول عنصر من نوعه (الظهور الأول) داخل العنصر الأب <article>. بعض الملاحظاتإنّ الفئة الزائفة :first-of-type تُعتبر مشابهة للفئة الزائفة :first-child ولكن مع فرق جوهري واحد وهو أنّه لا يشترط -كما كان الحال في :first-child - أن يكون العنصر هو الإبن الأول للعنصر الأب. ففي المثال السابق استطعنا استخدام :first-of-type لتحديد العنصر <p>، أمّا لو استخدمنا :first-child فإننا لن نستطيع تحديد أي من العنصرين <p> لأنهما ليسا العنصر الإبن الأول (العنصر الإبن الأول هو <h1>). وكما هو الحال بالنسبة للفئات الزائفة السابقة فإنّ الفئة الزائفة :first-of-type يمكن استخدامها مع محددات (selectors) أخرى مثل :hover و::before (فمثلًا يمكنك القيام بشيء مشابه لهذا p:first-of-type:hover). أمثلة إضافيةتخيل أنك تملك شيفرة HTML التالية: <div class="container"> <h1>Title</h1> <nav> <ul> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> </ul> </nav> <article> <h2>Title</h2> <p> Lorem Ipsum... <a href="#">Link</a>... <a href="#">another Link</a> </p> <p> Lorem Ipsum... </p> </article> <article> <h2>Title</h2> <p> Lorem Ipsum... </p> <p> Lorem Ipsum </p> </article> </div>وتخيل تنسيقات CSS التالية: article:first-of-type { background-color: #eee; border: 1px solid #ddd; }هنا سوف يتم اختيار العنصر <article> الأول وإعطاؤه الخاصيتين background-color: #eee وborder: 1px solid #ddd. لنأخذ تنسيقات CSS أخرى: p:first-of-type { font-weight: bold; }هنا سوف يتم تحديد أول عنصر <p> داخل العنصر الأب الذي يحتويه، وبناء على ذلك فإنّه سوف يتم تحديد عنصر <p> الأول الموجود في كلا العنصرين <article> وإعطاؤهما الخاصية font-weight: bold. أنظر إلى تنسيقات CSS الأخيرة هذه: a:first-of-type { color: deepPink; } a:first-of-type::after { content: "(" attr(href) ")"; color: deepPink; }في هذه التنسيقات سوف يتم تحديد أول ظهور للعنصر <a> داخل أي عنصر آخر وسوف يتم استخدام ::after لوضع قيمة href لهذه العناصر إلى جانب العنصر وداخل قوسين. يمكنك معاينة جميع الأمثلة السابقة من هنا. دعم المتصفحاتهذه الفئة الزائفة مدعومة في متصفحات Chrome، Firefox، Safari، Opera 9.5+، Internet Explorer 9+ وفي متصفحات Android وiOS. :last-of-typeتقوم هذه الفئة بتحديد آخر ظهور لأحد العناصر الإبن الموجودة في عنصر أب، أي أنّه لا يشترط -كما كان الحال في :last-child- أن يكون العنصر هو الإبن الأخير للعنصر الأب. دعونا نأخذ مثالًا بسيطًا: <article> <h1>Article Title</h1> <p> First paragraph. </p> <p> Second paragraph. </p> <footer> <-- .. --></footer> </article>p:last-of-type { font-style: italic; }في هذا المثال سوف يتم تحديد العنصر <p> الذي يحتوي على النص "Second paragraph" وذلك لأنه هو آخر عنصر من نوعه (الظهور الأخير) داخل العنصر الأب <article>. بعض الملاحظاتإنّ الفئة الزائفة :last-of-type تُعتبر مشابهة للفئة الزائفة :last-child ولكن مع فرق جوهري واحد وهو أنّه لا يشترط -كما كان الحال في :last-child - أن يكون العنصر هو الإبن الأخير للعنصر الأب. ففي المثال السابق استطعنا استخدام :last-of-type لتحديد العنصر <p>، أمّا لو استخدمنا :last-child فإننا لن نستطيع تحديد أي من العنصرين <p> لأنهما ليسا العنصر الإبن الأخير (العنصر الإبن الأخير هو <footer>). وكما هو الحال بالنسبة للفئات الزائفة السابقة فإنّ الفئة الزائفة :last-of-type يمكن استخدامها مع محددات (selectors) أخرى مثل :hover و::before (فمثلًا يمكنك القيام بشيء مشابه لهذا p:last-of-type:hover). أمثلة إضافيةتخيل أنك تملك شيفرة HTML التالية: <div class="container"> <h1>Title</h1> <nav> <ul> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> </ul> </nav> <article> <h2>Title</h2> <p> Lorem Ipsum... <a href="#">Link</a>... <a href="#">another Link</a> </p> <p> Lorem Ipsum... </p> </article> <article> <h2>Title</h2> <p> Lorem Ipsum... </p> <p> Lorem Ipsum </p> </article> </div>وتخيل تنسيقات CSS التالية: article:last-of-type { background-color: #eee; border: 1px solid #ddd; }هنا سوف يتم اختيار العنصر <article> الأخير وإعطاؤه الخاصيتين background-color: #eee وborder: 1px solid #ddd. لنأخذ تنسيقات CSS أخرى: p:last-of-type { font-weight: bold; }هنا سوف يتم تحديد آخر عنصر <p> داخل العنصر الأب الذي يحتويه، وبناء على ذلك فإنّه سوف يتم تحديد عنصر <p> الأخير الموجود في كلا العنصرين <article> وإعطاؤهما الخاصية font-weight: bold. أنظر إلى تنسيقات CSS الأخيرة هذه: a:last-of-type { color: deepPink; } a:last-of-type::after { content: "(" attr(href) ")"; color: deepPink; }في هذه التنسيقات سوف يتم تحديد آخر ظهور للعنصر <a> داخل أي عنصر آخر وسوف يتم استخدام ::after لوضع قيمة href لهذه العناصر إلى جانب العنصر وداخل قوسين. يمكنك معاينة جميع الأمثلة السابقة من هنا. دعم المتصفحاتهذه الفئة الزائفة مدعومة في متصفحات Chrome، Firefox، Safari، Opera 9.5+، Internet Explorer 9+ وفي متصفحات Android وiOS. ()nth-child:تسمح لك هذه الفئة الزائفة بتحديد العناصر بناءً على رقمها أو مكان ظهورها في الكود المصدري داخل الحاوي الخاص بها. يمكنك أن تُعطي هذه الفئة رقمًا موجبًا وسوف تقوم هذه الفئة بتحديد العنصر الذي يتوافق ترتيبه داخل العنصر الحاوي الخاص به مع الرقم الموجب الذي أعطيته لها. فعلى سبيل المثال، القيمة التالية (li:nth-child(3 سوف تقوم بتحديد العنصر <li> الذي يكون ترتيبه هو الثالث داخل العنصر الأب الذي يحتويه. يمكنك أيضًا أن تُعطيها القيمة "even" أو "odd" بحيث تقوم "even" بتحديد العناصر الزوجية (2، 4، 6، 8 ...الخ) وتقوم "odd" بتحديد العناصر الفردية (1، 3، 5، 7 ...الخ). فمثلًا (li:nth-child(even سوف تقوم بتحديد جميع عناصر <li> الزوجية داخل العنصر الذي يحتويها و (li:nth-child(odd سوف تقوم بتحديد جميع عناصر <li> الفردية داخل العنصر الذي يحتويها. تسمح لك هذه الفئة الزائفة أيضًا باختيار العناصر بناءً على معادلة (equation) تعطيها لها وتكون على الشكل :(nth-child(an+b بحيث تقوم باستبدال a وb برقمين صحيحن (integers) من اختيارك وn تمثل الأرقام الموجبة (3،2،1،0 وهكذا). وعلى سبيل المثال سوف تقوم القيمة :(nth-child(3n+1 بتحديد العنصر الإبن الأول ( لأنّ 3*0 +1=1) وسوف يقوم أيضًا بتحديد العنصر الإبن الرابع (لأنّ 3*1 +1=4) وأيضًا يتم تحديد العنصر الإبن السابع (لأنّ 3*2 +1=7) وهكذا دواليك. ما تقوم به :(nth-child(an+b هو أنّها تقوم بتقسيم العناصر الأبناء إلى عدد "a" من العناصر (المجموعة الأخيرة تأخذ الباقي) وبعدها تقوم بتحديد العنصر الذي يكون ترتيبه "b" داخل كل مجموعة. فعلى سبيل المثال سوف تقوم القيمة :(nth-child(3n+1 بتقسيم العناصر <li> إلى 3 مجموعات وتقوم بوضع الباقي في مجموعة رابعة (هذا في حالة أن عدد العناصر لا يقبل القسمة على 3) وبعدها تقوم بتحديد العنصر الأول من كل مجموعة. الصورة التالية تُظهر نتيجة تطبيق (li:nth-child(3n+1 على 11 عنصر <li>، وبما أنّ a=3 فإنّه سوف يتم قسمة العناصر العشرة على 3 وبما أنّ 3/11 يساوي 3 والباقي 2 فإنّه سيتم وضع العنصرين الأخيرين في مجوعة رابعة منفصلة، وبعد ذلك سوف يتم اختيار العنصر الأول من كل مجموعة (لأنّ b=1). العناصر الملونة باللون الأزرق هي التي سوف يتم اختيارها. عندما تقوم بتمرير معادلة ما إلى الفئة الزائفة ()nth-child: فإنّ المتصفح يقوم بالمرور على جميع العناصر الأبناء الموجودة داخل أحد العناصر وبعدها يقوم بتحديد العناصر التي تتوافق مع المعادلة. أيّ أنّ العناصر يتم معاملتها على أنها مصفوفة (array) وكل عنصر لديه رقم خاص به وقد يتطابق أو لا يتطابق مع نتيجة المعادلة. بعض الملاحظاتقد يكون التعامل مع ()nth-child: شيئًا مربكًا ومشوشًا، ولا شك في أنّ القيام بالحسابات التي تتطلبها هذه الفئة لن يكون أمرًا سهلًا وممتعًا، ولهذا السبب فقد قام البعض بتطوير مجموعة من الأدوات التي تجعل الأمر أسهل وأيسر وهذه بعض منها: CSS3 structural pseudo-class selector testerNTH-TEST – nth-child and nth-of-type testerوكما هو الحال بالنسبة للفئات الزائفة السابقة فإنّ الفئة الزائفة ()nth-child: يمكن استخدامها مع محددات (selectors) أخرى مثل :hover و::before. لاحظ في المثال التالي كيف استخدمنا ()nth-child: مع :hover: li:nth-child(2n+3)::after { /* styles here */ } tr:nth-child(even):hover { background-color: lightblue; }هناك فئة زائفة أخرى تعمل بشكل مشابه للفئة الزائفة ()nth-child: وهذه الفئة هي ()nth-last-child: والفرق الجوهري بينهما هو أنّ الأخيرة تبدأ من العنصر الأخير بدلًا من العنصر الأول. هناك أيضًا الفئة ()nth-of-type: وهي تشبه الفئة ()nth-child: إلّا أنّ الأولى تقوم بتحديد العناصر إذا كانت تلك العناصر من نوع محدد. أمثلة أخرىفي المثال التالي سوف يتم تحديد الصفوف الأفقية في الجداول وإعطاؤها لون خلفية رمادي (#eee). tr:nth-child(even) { background-color: #eee; }تعتبر الأسطر التالية كلها صالحة: li:nth-child(-n+1) {} p:nth-child(odd) {} tr:nth-child(2n) {} article:nth-child(2n+1) {} li:nth-child(4n+1) {}يمكنك الدخول على هذه المعاينة والتلاعب بالمدخلات والأرقام لترى كيف يتم تحديد العناصر. 3- دعم المتصفحاتهذه الفئة الزائفة مدعومة في متصفحات Chrome، Firefox، Safari، Opera 9.5+، Internet Explorer 9+ وفي متصفحات Android وiOS.

سنتحدّث في هذه المقالة عن جزءٍ مهمٍّ في CSS3، والذي يعمل بشكلٍ مُنسجمٍ مع HTML5 وبالتحديد مع النماذج (forms). يَشترط هذا المقال معرفة مُسبقة بلغة HTML وCSS ومبادئ JavaScript، لن يكون الموضوع صعبًا وسنتناوله بشكلٍ مُبسط. نبذة عن الأصناف الزائفةلكي لا يلتبس عليك الأمر أودُ الإشارة إلى أنّ كلمة pseudo (الّتي تعني "زائف") تُلفظ "سودو" وذلك لكي تَستطيعَ تمييزها في حال سماعك لها في شرح ما. يُشير الصّنف الزائف إلى عنصر (element) موجود في البناء الهيكلي لمُستند HTML ولكن لا يُمكن الوصول إليه مباشرةً عبر خواص (attributes) محددة سابقًا، فمثلًا: يستهدف الصنف الزائف ‎:first-child العنصر الأول الذي يلي العنصر الأب، وقد يكون العنصر الأول <h1> أو<p>، لذلك لا تستطيع استهدافه بشكل مباشر ولكن المتصفّح يَعرف طريقه إليه. قدّم الإصدار 2.1 من CSS عددًا قليلًا من الأصناف الزّائفة، من بينها أوضاع الوصلات (link states)، وأيضًا تلك التي تُعبر عن أفعال المستخدم مثل ‎:active و‎:hover؛ أمّا في الإصدار الثالث فقد ازداد عددها، وتوفّر منها ما هو مُرتبط بهيكل مُستند HTML مثل ‎:nth-of-type و‎:nth-child ، وكذلك ما هو مُرتبط مع الواجهة المرئيّة مثل ‎:checked و‎:enabled، ومنها أيضًا ما يتعلّق بتدقيق النّماذج (form validation)، وهي موضوع مقالنا هذا. تدقيق صلاحية النموذج بدون استخدام JavaScriptقدّمت لنا HTML5 إمكانيّة تدقيق النّماذج ضمن المتصفّح (خلافًا للتّدقيق على الخادوم) بدون الاستعانة بلغة JavaScript، عندما تُحاول إرسال النموذج، سيُدقّق المتصفح كافة الحقول ويُظهر رسالة خطأ عند تعبئتها بشكل غير صحيح، هذا التصرّف تلقائيّ من المتصفّح إذا كان يدعم ذلك، وقد تختلف رسائل الخطأ هذه من متصفح إلى آخر ومن نظام تشغيل إلى آخر، وتعديلها ليس سهلًا نسبيًا، ولكن بإمكانك تغيير طريقة ظهور رسائل الخطأ على العناصر نفسها باستخدام الأصناف الزّائفة والتي تُصنّف ضمن وحدة واجهة المستخدم الأساسية في CSS3‏ (‏CSS Basic User Interface Module) وفق مُواصفات W3C، تَجد في الصور التّالية كيف يَعرض كل متصفح تنسيقًا مُختلفًا عن الآخر. سأركز على دعم المتصفحات في القسم الأخير من المقالة ولكن باختصار أغلب المتصفحات تدعم تدقيق النماذج، والأمثلة في الصور التوضيحية التّالية مأخوذة من متصفح Chrome، ويُفضل دائمًا متابعة التحديثات التي تطرأ على دعم المتصفحات بالاطلاع على الموقع هنا، لنُباشر بالأمثلة العملية. العناصر المطلوبة والاختياريةإن القيم المطلوبة (الإلزاميّة) واحدة من أشكال التدقيق الأكثر شيوعًا، وتُستخدم لتمييز الحقول التي يتحتّم على المستخدم تعبئتها لكي يتسنى له المُتابعة، لجعل عنصر في نموذج مطلوبًا، أضف الخاصّة required إليه: <input type="text" required>من ناحية المظهر، استخدم الصّنف الزائف ‎:required والذي يَستهدف العنصر الذي يَملك الخاصّة required، على سبيل المثال لِوضع علامة النجمة (*) بجانب عنوان الحقل، والتي عادةً ما تُستخدم لتُشير إلى أنّ هذا الجزء من النموذج مطلوب وليس اختياريًّا اكتب التالي: input:required + label::after { content: "*"; }تطبيق التنسيق السابق يَعتمد على كيفيّة بناء مُستند HTML فالمثال السابق يخص التّالي: <input type="text" required id="foo"> <label for="foo">Foo</label>يُستهدف الحقل الاختياري بالصّنف الزّائف ‎:optional وبُطبق تأثيره على على كل عنصر لا يملك الخاصة required، مثلًا لجعلٍ حقل اختياري ذا حدود فاتحة نُطبق التنسيق التالي: input:optional { border-color: silver; } العناصر السليمة وغير السليمةلتدقيق النماذج أشكال أخرى بجانب required وoptional تُمكنك من استخدام مطابقة الأنماط (pattern matching)، فمثلًا لِتدقيق عنوان البريد الإلكتروني: <input type="email">عندما يقوم المُستخدم بإرسال مُدخلات لا تُطابق نمطًا مُحددًا، يُعتبر المُدخل غير سليم، ولِتَنسيق عناصر النموذج السليمة وغير السليمة، يُستخدم الصّنفان الزائفان :valid و:invalid بالتّرتيب، وتُرسم إشارة تبعًا لسلامة المُدخل كما يلي: input:invalid + label::after { content: ' ⨉'; } input:valid + label::after { content: ' ✓'; }لاحظ أنّ هذا التنسيق يُطبقُ عند تحميل الصفحة لذلك يجب استخدام JavaScript لتطبيق التأثيرات عند إرسال النموذج، وذلك بإضافة صنف (class) إليه، في مثالنا سوف نضيف الصنف submitted: document.forms[0].addEventListener('submit', function(e) { e.currentTarget.classList.add('submitted'); });قد يَختلف النّص البرمجيّ الذي ستكتبه، ولكن كلّ ما عليك فعله هو تنسيق الصنف كما في التالي: .submitted input:invalid + label::after { content: ' ⨉'; } مجالات الأرقامتسمح بعض أنواع الحقول مثل number بتحديد مجال من القيم باستخدام الخاصيات min وmax كما في التّالي: <input type="number" max="10" min="1">في الحالة الطبيعية سيحدّ المتصفح مجال الأرقام تلقائيًّا بحيثُ لا يَسمح للمُستخدم بتجاوزه، ولكن إنّ أمكن تعديل هذه القيمة (باستعمال JavaScript مثلًا) لتتجاوز هذا المجال، فيمكن أنّ يُستخدم تنسيق خاص لإظهار الخطأ: <input type="number" max="10" min="1" value="11">يُستخدم عندها الصنف الزائف ‎:out-of-range وتنسيقه: input[type='number']:out-of-range { border-color: red; }بعكس ‎:out-of-range لدينا ‎:in-range وتنسيقه: input[type='number']:in-range { border-color: green; } القراءة والكتابةيكون لديك في بعض الأحيان حقل نموذج مُدخل مسبقًا بقيمة لاتريد من المستخدم التعديل عليها كما في حقل textarea في اتفاقية الاستخدام مثلًا، يُمكنك عندها إضافة الخاصّة للقراءة فقط readonly. <textarea readonly>Lorem ipsum</textarea>لتنسيق العناصر التي تحمل الخاصّة readonly يُستخدم الصّنف الزّائف ‎:read-only وبإمكانك أيضًا إضافة الخاصة user-select لِتمنع المستخدم من تحديد النص. textarea:read-only { user-select: none; }ويُستخدم الصّنف الزّائف ‎:read-write للعناصر الأُخرى المسموح بتعديلها ويُنسق بالشكل التّالي: textarea:read-write { user-select: text; }لاحظ أنّه قد تمّ تنسيق الحواف للتمييز، حيث بشكل افتراضيّ لا يُوجد فرق في التنسيق بين الصّنفين الزّائفين ‎:read-only و‎:read-write دعمُ المتصفحاتيُوضّح الجدول التّالي دعم المُتصفحات لِتدقيق النموذج، تجد آخر تحديث للجدول هنا، حيث يُلاحظ أنّ أغلب المتصفحات في آخر إصداراتها تدعم هذه الخاصة. أما الجدول التّالي فيُوضح دعم المتصفحات للأصناف الزّائفة، بالنسبة للدّعم الجزئي (partial support) لأشباه الأصناف، فيعني أنّه عند استخدامها يجب إضافة البادئة moz لفيرفُكس وms لـِIE وwebkit لباقي المُتصفحات، تجد آخر تحديث للجدول هنا ‏HTML و CSS لغتان في تطوّر مُستمر وذلك من شأنه أنّ يُقلّل من اعتمادنا على JavaScript، مما يُقلّل حجم ملف .js (على حِساب ملف .css) المُرسل للمستخدم ومنه إلى سرعة نسبيّة في التصفح وتجربة استخدام أفضل، أرجو أنّ أكون قد وفقت في الشرح وقدّمت الفائدة المرجوّة من هذه المقالة، أنصحكَ بالتطبيق العمليّ لتركيز المعلومة، ولا تنسَ مشاركة المقالة. ترجمة -وبتصرّف- للمقال: CSS3 Pseudo-Classes and HTML5 Forms‏ لصاحبه Peter Gasston‏.