بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
1-المعرفات البسيطة Simple Selectors .
2-المعرفات المعقدة Advanced Selectors .
المعرفات البسيطة تعرفنا عليها في الدرس الثاني ، وطبقناها بالفعل في الدروس الماضية ، وسنبدأ اليوم في أولى أنواع المعرفات المعقدة.
Pseudo Classes
نوع من أنواع المعرفات المعقدة ، ويستخدم لاختيار عنصر أو عدة عناصر للتأثير عليها وهي في حالة معينة ، وصيغة كتابتها كالتالي:
منها ما يستخدم مع الروابط فقط مثل:
link: للتأثير على الرابط في حالته العادية.
visited: للتأثير على الرابط الذي تمت زيارته.
active: للتأثير على الرابط في حالة الضغط عليه.
وأخرى تستخدم مع الروابط وغيرها مثل:
hover: للتأثير على العنصر في حالة مرور الماوس فوقه.
وهناك أيضا خامسة تستخدم مع الروابط و مع الحقول وهي:
focus: للتأثير على الرابط أو الحقل في حالة التركيز عليه.
يمكنك تجربتها كل واحدة على حدا ، حالة visited لا يمكن ملاحظة نتيجتها مطلقا على الأقل في المتصفحات الجديدة ، جرب بنفسك ، في حالة active يظهر التأثير بشكل خاطف ثم يختفي ، أما في حالة hover فيبقى التأثير واضحا مادام مؤشر الفأرة فوق العنصر ، وفي حالة focus بالنسبة للرابط فيمكنك استخدام الخاصية target وإعطائها القيمة blank_ حتى يفتح في نافذة جديدة وهكذا يظهر تأثير focus ويبقى ظاهرا ، وسنستخدمها أيضا مع input من النوع text .
ليكن كود html التالي:
سنضغط على الرابط (go to msn) لكي يظهر تأثير focus وكما قلنا تأثير hover سيظهر بمرور الماوس فوق الرابط وتأثير active سيظهر بشكل خاطف وبالتالي لابد أن تجرب بنفسك ، وهذه هي النتيجة:
أجمع المصممون على استخدام الكلاسات link و visited في قاعدة واحدة ، وكذلك hover و active ، سنطبق ذلك على نفس الروابط وبالمرة نطبق الكلاس focus على الحقل الذي تراه في الصورة سنغير شكله بمجرد الضغط والتركيز عليه.
وهذا هو التنسيق الجديد:
وهذه هي النتيجة :
وكما ترى تغير شكل input عندما ركزنا وضغطنا داخله.
أمثلة أخرى عن بعض pseudo classes
checked: للتأثير على input من النوع checkbox و النوع radio وتحديدا في حالة التأشير الإفتراضي عليه .
desabled: للتأثير على حقل تم تعطيله مسبقا.
empty: للتأثير على عنصر في حالة ليس له أبناء childs .
enabled: للتأثير على حقل فعال عكس desabled .
first-child: للتأثير على عنصر في حالة كونه أول إبن child لأبيه parent .
last-child: للتأثير على عنصر في حالة كونه آخر إبن للأب.
lang: للتأثير في عنصر في حالة كان يحمل الخاصية lang تساوي لغة معينة.
not: للتأثير في عنصر ليس من النوع المشار إليه ، ويكتب العنصر المشار إليه بين قوسين أمام الكلاس.
nth-child: للتأثير على عنصر أو عدة عناصر بترتيب معين شريطة أن تكون متشابهة وتابعة لأب واحد.
وهناك الكثير منها بعد ولكن ثق بأنني جلبت لك أفضلها وأكثرها استخداما ، ويمكنك البحث عن الأخرى التي لم أذكرها وتجربتها من باب المعرفة.
سنجرب بعضها في مثال:
وهذا هو التنسيق:
وهذه هي النتيجة:
لاحظ بأننا استخدمنا الخاصية lang في ملف html مع الفقرة العربية وأعطيناها القيمة ar ونسقناها لاحقا باستخدام الكلاس lang .
مع الكلاس nth-child استخدمنا (2) وعنينا بها الفقرة الثانية في الترتيب ، (3n) عنينا بها كل ثالثة في الترتيب وهي التي أخذت اللون البرتقالي بمعنى يترك اثنتين وينسق الثالثة ثم يترك اثنتين وينسق الثالثة ويستمر في ذلك ما وجد فقرة ترتيبها من مضاعفات 3 ، (2n+3) عنينا بها أن ينسق كل ثانية في الترتيب شريطة أن يبدأ العد من الثالثة وهي الفقرات التي ظهرت بخط tahoma .
first-child و last-child لا تحتاجان إلى شرح فهما واضحتان.
نكتفي بهذا القدر ، وموعدنا في الدرس القادم مع Pseudo Elements ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.