هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: محددات CSS: استهداف العناصر بواسطة nth-of-type والأول والأخير من نوعه
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
محددات CSS: استهداف العناصر باستخدام nth-of-type، الأول والأخير
في هذا الدرس من دورة CSS لتطوير الويب، سنتعرف على كيفية استخدام محددات CSS المتقدمة لتطبيق التنسيقات على العناصر بناءً على ترتيبها داخل عناصر أخرى. واحدة من هذه الأدوات القوية هي nth-of-type، التي تتيح لك استهداف عنصر معين داخل مجموعة من العناصر بناءً على ترتيبه.
استخدام nth-of-type لاستهداف العناصر بناءً على الترتيب
محدد nth-of-type
يسمح لك بتحديد أي عنصر داخل عنصر آخر بناءً على ترتيبه. على سبيل المثال، إذا كان لديك 10 عناصر <div>
داخل عنصر <body>
، يمكنك استهداف العنصر الثامن بهذه الطريقة:
body > div:nth-of-type(8) {
background-color: orange;
}
في هذا المثال، يتم تغيير لون خلفية العنصر الثامن إلى اللون البرتقالي.
استهداف العنصر الأول باستخدام :first-of-type
يمكنك استهداف العنصر الأول من نوع معين داخل عنصر آخر باستخدام محدد :first-of-type
. هذه الطريقة مثالية إذا كنت تريد تخصيص نمط محدد للعنصر الأول فقط:
body > div:first-of-type {
background-color: blue;
}
في هذا المثال، يتم تغيير خلفية أول <div>
داخل عنصر <body>
إلى اللون الأزرق.
استهداف العنصر الأخير باستخدام :last-of-type
لتطبيق التنسيقات على العنصر الأخير داخل مجموعة من العناصر، يمكنك استخدام محدد :last-of-type
:
body > div:last-of-type {
background-color: yellow;
}
في هذا المثال، يتم تغيير خلفية آخر <div>
داخل عنصر <body>
إلى اللون الأصفر.
تحسين تصميماتك باستخدام nth-of-type
يمكنك استخدام محدد nth-of-type
لتحديد أي عنصر داخل مجموعة بناءً على ترتيبه. على سبيل المثال، إذا كنت ترغب في استهداف العنصر الثاني فقط، يمكنك استخدام الكود التالي:
body > div:nth-of-type(2) {
background-color: pink;
}
هذا يتيح لك التحكم الكامل في كيفية عرض العناصر على صفحة الويب، مما يسمح لك بإنشاء تصميمات متجاوبة ومنظمة.
لماذا يعد استخدام محددات nth-of-type مفيدًا؟
استخدام محدد nth-of-type
يتيح لك استهداف وتطبيق التنسيقات بشكل دقيق على عناصر معينة داخل مجموعة. هذا يجعل تصميماتك أكثر مرونة ويقلل من الحاجة إلى كتابة كود CSS متكرر. كما يسمح لك بتحسين تجربة المستخدم عن طريق تخصيص مظهر العناصر بناءً على ترتيبها.
ابدأ رحلتك التعليمية الآن!
انضم إلى دبلومة تطوير الويب لدينا وتعلم كيفية استخدام تقنيات CSS المتقدمة مثل nth-of-type
و :first-of-type
و :last-of-type
. مع دوراتنا الشاملة، يمكنك تحسين مهاراتك في تطوير الويب والحصول على شهادة معتمدة تساعدك في تحقيق أهدافك المهنية.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي محددات CSS: استهداف العناصر بواسطة nth-of-type والأول والأخير من نوعه
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
أوامر بناء صفحة إنترنت مستخدمة في هذا الدرس
أوامر تنسيق مستخدمة في هذا الدرس
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
ملف الشرح المرجعي وصول لعناصر صفحات الإنترنت وتنسيقها
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت