محددات CSS المتقدمة: استهداف العناصر بدقة – الإعلام الآلي — السنة الأولى ثانوي (جذع مشترك علوم وتكنولوجيا) — المنهاج الجزائري

محددات CSS المتقدمة: استهداف العناصر بدقة

محددات CSS هي أنماط تستخدم لاستهداف عناصر HTML معينة وتطبيق أنماط عليها. توفر CSS مجموعة واسعة من المحددات تتراوح بين البسيطة والمتقدمة، مما يسمح بتحكم دقيق في تنسيق صفحات الويب.

المحددات الأساسية

• محدد العنصر: p { } – يستهدف جميع عناصر p
• محدد الفئة: .class { } – يستهدف العناصر من فئة معينة
• محدد المعرف: #id { } – يستهدف عنصراً بمعرف فريد
• المحدد العام: * { } – يستهدف جميع العناصر

المحددات المتقدمة

• المحددات المركبة: div p { } – عنصر p داخل div
• المحدد المباشر: div > p { } – ابن مباشر
• المحدد المجاور: h1 + p { } – العنصر الذي يلي h1 مباشرة
• محدد السمة: input[type=”text”] { } – عنصر input من نوع text
• محددات الحالة: a:hover { }، input:focus { }، li:nth-child(odd) { }

مثال تطبيقي

لتنسيق كل فقرة داخل قسم معين بلون أحمر: section.main p { color: red; }. لتنسيق الصفوف الزوجية في جدول: tr:nth-child(even) { background: #f2f2f2; }.

تمارين

1. اكتب محدداً يستهدف كل عنصر li داخل قائمة غير مرتبة من فئة menu.
2. اكتب محدداً يستهدف أول حرف من كل فقرة.
3. كيف تستهدف كل زر من نوع submit في نموذج؟

خلاصة

محددات CSS المتقدمة تسمح بتحكم دقيق في تنسيق عناصر الصفحة دون الحاجة لإضافة فئات أو معرفات إضافية في HTML. إتقانها يسهل كتابة أكواد CSS نظيفة وفعالة.