مرحبًا مرة أخرى بالجميع. سنتحدث اليوم بإيجاز شديد عن
الفئات والعناصر الزائفة (pseudo classes and elements). لذلك كنا نتناول أنواعًا مختلفة من العناصر
خلال هذه الدورة التدريبية بأكملها، وكيف يمكننا هيكلتها وتصميمها. حسنًا، إن العناصر الزائفة (pseudo elements) تختلف لحد ما عن الأشياء الأخرى ورأينا من قبل أنها تعتمد بشكل كبير على بنية ال DOM و وأن بعضها بالفعل منتشر بشكل ديناميكي. لذا وبصراحة، قد رأيت هذا من قبل عندما تحدثنا عن تصميم الروابط لأن الروابط لها تلك الحالات المختلفة. وكانت إحدى الأمثلة التي استخدمناها هى فكرة الوقوف على الرابط. إذا قمت بتمرير الماوس فوق الرابط، قد يمكنك تغيير التصميم
للتخلص من إشكالية وضع خط تحت الكلمات أو تغيير اللون. لذا، فلنتحدث عن بعض هذه الأنواع المختلفة
من الفئات الزائفة (pseudo-classes) بخلاف ما يمكنك ان تفعله بالرابط فقط. وقد بدأت بالمثال الذي رأيته من قبل. فيمكن أن يكون لديك رابط ورابط اّخر قد تمت زيارته. كما يمكنك أيضًا التفاعل مع أنشطة المستخدمين المختلفة. لذا، إذا قام شخص ما بالوقوف على فقرة أو أو بالمرور فوق علامة H1 يمكنك التفاعل مع ذلك. فالأمر لا يتطلب فقط أن يكون رابطًا. ويمكنك أيضًا أن تجعله نشطًا، ونشط تعني عندما تقوم بالضغط على زر الفأرة لأسفل
فوق بعض أنواع تلك العناصر. ونقوم بالتركيز على العنصر الأخير. ويتبلور هذا التركيز عندما يتنقل شخص ما عبر الصفحة ويمكنك التركيز على كل من هذه العناصر. وفي الختام، هناك شيئًا يعني الكثير وربما قد رأيته من قبل، وهو أنه يمكنك الحصول على الفئات الزائفة (pseudo-classes)
لنماذج أو واجهات إذا قمت بالنقر في مربع الاختيار أو أو إذا تم وضع علامة فيه، ترى أحيانًا أنه لونه يتحول للون الأصفر. أو إذا قمت بزيارة موقع ما من قبل ولم يٌسمح لك بكتابة شيء ما فيه حتى تكتب شيء ما في مربع موجود أعلاه،
سيتحول اللون إلى لون مائل إلى اللون الرمادي. إذًا، هل تعلم ما هى الطريقة التي ستمضى بها قُدمًا وتفعل بها ذلك؟ إن قام شخص ما بالوقوف فوق الفقرة الخاصة بي،
أود فقط أن أقوم بعمل إطار. الإطار: 1 بكسل. على الرغم من أنه الاّن لا توجد مساحة على DOM حيث يتم الوقوف على P، إلا أنك عندما تضع قاعدة التصميم هذه في الحسبان،
سيسير معك الأمر على ما يرام. لذا، يمكنك أيضًا التصميم بناءً على الوضع الهيكلي للعناصر المختلفة. لديك أول طفل، واّخر طفل، وطفل تاسع. إن الطريقة التي يتم العمل بها
هى وضع رقم لنقول الطفل الخامس أو الطفل التاسع. ومن الممكن أن يكون لديك طفل واحد. فيكون لديك تسميات مختلفة
مثل الأول من نوعه والأخير من نوعه، والفريد من نوعه. ومرة أخرى، لديك فقط العنصر، القولون و ثم اسم الفئة الزائفة (pseudo-class) الذي تريد تصميمه. إن العناصر الزائفة (Pseudo elements)
لا تكون بالضرورة جزءًا من DOM، ولكن يمكن استخدامها لتصميم أجزاء محددة ومتفردة من الصفحة. لذا، قد تتضح بعض الأمثلة إذا كان لديك فقرة ما
وأردت وضعها في هذا الإطار يكون الحرف الأول بخط مختلف،
ويمكنك استخدام الحرف الأول من العنصر الزائف (pseudo element). كما هو الحال تمامًا مع السطر الأول، فيمكنك أن تقوم بتصميم أشياء نظهر قبل أو بعد العناصر. ففي بعض الأحيان،
إن كنت تصمم شيئًا مثل معلومات بطاقة الائتمان، يمكنك المُضي قُدمًا وإدخال أنواع مختلفة
من بطاقات الائتمان، ولكن قبل أن تقول أهلاً أو وداعًا، قم بوضع صورة هنا. يمكنك أيضًا تصميم فقط أجزاء من اختيارات مختلفة. لم أعطك الاّن العديد من المعلومات البرمجية "الأكواد"
هنا في هذا الصدد حيث أننا نستخدم بالفعل الفئات الزائفة (pseudo classes) والعناصر الزائفة (pseudo elements)
والتي تعتبر شيئًا فريدًا جدًا في الصفحة التي تقوم بإنشائها. لذا فعندما سأتحدث عن الجداول لاحقًا، برجاء الانتباه لأنني سأستخدم العديد من الفئات والعناصر الزائفة (seudo classes and
pseudo elements) هناك. ومن الضروري أن ندرك أنني لن يكون بإمكاني تغطية كل شيء نتعلمه برمته. ولكني أود أن أعطيك الأدوات حتى يمكنك المُضى قُدمًا و واستكشاف كيفية إضافة أنماط جديدة جذابة إلى <br />صفحتك. حظ سعيد.