10. دمج المحددات: التجميع والربط

مع نمو ملفات التنسيق الخاصة بك، ستحتاج إلى طرق لتطبيق القواعد بكفاءة على عناصر متعددة أو لاستهداف عناصر بناءً على شروط متعددة.

1. تجميع المحددات (الفاصلة `,`)

إذا كنت تريد تطبيق نفس الأنماط تماماً على عدة محددات مختلفة، يمكنك تجميعها باستخدام الفاصلة.

css /* تطبيق نفس الخط على جميع العناوين */ h1, h2, h3, h4 { font-family: Georgia, serif; color: #1a1a1a; }

/* تطبيق إعادة تعيين على عدة عناصر شائعة */ input[type="text"], textarea, select { border: 1px solid #ccc; padding: 5px; }

يقلل التجميع بشكل كبير من التكرار في ملف CSS الخاص بك.

الربط يعني الجمع بين محددات متعددة بدون مسافة بينها لاستهداف عنصر يستوفي جميع المعايير.

مثال: استهداف وسم معين بفئة معينة:

html

هذا نص مميز.

هذا أيضاً محتوى مميز.

css /* يستهدف فقط عناصر

التي تحتوي أيضاً على الفئة 'featured' */ p.featured { font-weight: bold; background-color: lightyellow; }

/* يستهدف أي عنصر يحتوي على الفئة 'featured' */ .featured { border: 1px dashed gray; }

مثال: استهداف فئات متعددة:

html

css /* يستهدف فقط العناصر التي تحتوي على كلتا الفئتين 'btn' و 'primary' */ .btn.primary { background: blue; color: white; }