مزيج
لا يتعين عليك تكرار محددات متعددة بنفس السمات، ما عليك سوى فصل المحددات بفواصل (،).
على سبيل المثال، لديك الكود التالي:
| ح2 { اللون: أحمر؛ } .هذه الفئة الأخرى { اللون: أحمر؛ } .yetAnotherClass { اللون: أحمر؛ } |
ثم يمكنك الكتابة:
| h2، .thisOtherClass، .yetAnotherClass { اللون: أحمر؛ } |
متداخلة
إذا كانت CSS منظمة بشكل جيد، فلن تكون هناك حاجة لاستخدام عدد كبير جدًا من الفئات أو محددات المعرفات. وذلك لأنه يمكنك تحديد المحددات داخل المحددات. (أو الأفضل من ذلك، محدد السياق - بواسطة المترجم)
على سبيل المثال:
| #قمة { لون الخلفية: #ccc؛ الحشو: 1em } #أعلى h1 { اللون: #ff0; } #أعلى ص { اللون: أحمر؛ وزن الخط: غامق؛ } |
يؤدي هذا إلى التخلص من محددات الفئة أو المعرفات غير الضرورية إذا تم تطبيقها على HTML مثل هذا:
| <div معرف = "أعلى"> <h1>كاري الشوكولاتة</h1> <p>هذه وصفتي لتحضير الكاري بالشوكولاتة فقط</p> <p>مممممممممم</p> </div> |