محددات CSS: استهداف العناصر بواسطة nth-of-type والأول والأخير من نوعه

الدرس: محددات CSS: استهداف العناصر بواسطة nth-of-type والأول والأخير من نوعه

المدة: 5 دقائق

وصف مختصر:

تعرف على تقنيات CSS المتقدمة لاستهداف العناصر حسب ترتيبها باستخدام nth-of-type والأول والأخير من نوعه لتطبيق أنماط فريدة على صفحات الويب الخاصة بك.

وصف الدرس

محددات 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 لإنشاء تصاميم وتنسيق صفحات الإنترنت

has been added to the cart. View Cart