نظرة على CSS3 الأول من نوع محدد الهيكلية
أحد الأشياء التي أحبها في CSS3 هو الإضافة الجديدة للمُحددات التي تتيح لنا استهداف العناصر على وجه التحديد دون الاعتماد على صف دراسي, هوية شخصية أو سمة عنصر أخرى ، وواحد سنغطيه هنا هو المحدد التالي, : الأولى من نوع.
ال : الأولى من نوع يستهدف المحدد أول عنصر للعنصر المحدد ، على سبيل المثال ، يستهدف المقتطف التالي الأول H2 على صفحة الويب.
h2: أول إعلان من نوع / * style * /
ال : الأولى من نوع يساوي أيضا : نطة من نوع (1), لذلك بدلا من اختيار فقط أول من النوع ، يمكننا كذلك تحديد الثانية والثالثة وهلم جرا. يستهدف المقتطف التالي الثاني H2 عنصر في صفحة الويب.
h2: nth-of-type (2) / * style style * /
: الأولى من نوع” ضد. “: أول طفل”
قد يبدو أن هذين المحددين يقومان بنفس الشيء ، لكن هذا ليس هو الحال. لنرى العرض التوضيحي التالي:
دعنا نقول لدينا خمسة عناصر الفقرة ملفوفة داخل شعبة, مثله:
براج 1
براج 2
براج 3
براغراف 4
براج 5
الآن ، نود تحديد الفقرة الأولى باستخدام : أول طفل منتخب.
p: الأول للطفل padding: 5px 10px؛ نصف قطر الحدود: 2 بكسل ؛ الخلفية: # 8960a7 ؛ اللون: # ff؛ الحدود: 1px صلب # 5b456a ؛
وكما توقعنا ، تم تحديد الفقرة الأولى بنجاح.
- : تجريبي للطفل الأول
ومع ذلك ، عندما نكون إضافة عنصر مختلف من قبل الفقرة الأولى ، دعنا نقول H1, مثل المقتطف أدناه:
عنوان 1
براج 1
براج 2
براج 3
براغراف 4
براج 5
لن يتم اختيار الفقرة الأولى, كأول طفل داخل شعبة هو لم تعد فقرة, ولكن الآن هو H1.
لذلك ، هذا هو الوضع حيث : الأولى من نوع محدد يأتي لحل المشكلة.
p: الأول من نوع padding: 5px 10px؛ نصف قطر الحدود: 2 بكسل ؛ الخلفية: # a8b700؛ اللون: # ff؛ الحدود: 1px صلب # 597500 ؛
- : الأول من نوع تجريبي
ال “الاخير” منتخب
حيث يوجد “أول”, ثم سيكون هناك أيضا “الاخير”.
عكس اثنين من المحددات التي ناقشناها أعلاه هما المحددان التاليان ؛ ال :الطفل الأخير و ال : آخر من نوع. هم أساسا نفس اثنين أعلاه ، إلا أنها تستهدف الطفل الأخير من العنصر المحدد.
على سبيل المثال ، ستستهدف هذه المقتطف أدناه الفقرة الأخيرة داخل div.
p: آخر طفل padding: 5px 10px؛ نصف قطر الحدود: 2 بكسل ؛ الخلفية: # 8960a7 ؛ اللون: # ff؛ الحدود: 1px صلب # 5b456a ؛
- : العرض الأخير للطفل
وسوف يستهدف هذا المقتطف أيضًا الفقرة الأخيرة في نفس الموقف كما ناقشنا أعلاه ؛ هذه المرة يتبع مباشرة عنصر مختلف.
p: الأخيرة من نوع padding: 5px 10px؛ نصف قطر الحدود: 2 بكسل ؛ الخلفية: # a8b700؛ اللون: # ff؛ الحدود: 1px صلب # 597500 ؛
- : العرض الأخير من النوع
The Selectivizr
مثل أي ميزة جديدة أخرى في CSS3 ، فإن هذه المحددات غير مدعومة في المتصفحات القديمة ، بشكل أساسي انترنت اكسبلورر 6 الى 8, مع استثناء ل : أول طفل محدد ، كما تمت إضافته منذ CSS2.1. النسبي لها :الطفل الأخير تمت إضافته فقط في CSS3.
لذلك ، إذا كانت كل هذه المحددات التي ذكرناها هنا مطلوبة بالفعل لموقعك ، فيمكنك استخدام مكتبة JavaScript تسمى Selectivizr لمضاهاة وظائف محدد CSS3 تلك.
يعتمد Selectivizr على مكتبات JavaScript الأخرى من أجل العمل ، مثل jQuery و Dojo و Prototype و MooTools ؛ ورؤية من جدول المقارنة في الموقع الرسمي ، يبدو أن MooTools قادر على التعامل مع جميع المحددات.
لذلك ، دعونا تضمينه جنبا إلى جنب مع Selectivizr ، على النحو التالي:
يضمن التعليق الشرطي أعلاه أن يتم تحميل هذه المكتبات فقط في برنامج Internet Explorer 8 وما دونه.
أخيرًا ، يمكنك مشاهدة العرض التوضيحي من الروابط التالية ، ويجب أن يعمل الآن في المتصفحات الحديثة والقديمة (IE8 وما دون). يمكنك أيضًا تنزيل الملف المصدر لمزيد من الفحص. استمتع.
- عرض
- تحميل المصدر
