اكتشفوا سلسلتنا الجديدة حول التغلب على الشدائد وتحويل التحديات إلى فرص!

Other pseudالعناصر الزائفة ومحددات الفئات الزائفة

مثل المحددات الزائفة الأخرى وعناصر الفئات الزائفة، يمكن ربط :not() مع فئات زائفة أخرى وعناصر زائفة. على سبيل المثال، يمكن استخدامه لإضافة كلمة “جديد!” إلى عناصر القائمة التي لا تحتوي على اسم الفئة .old باستخدام العنصر الزائف ::after:

معلومات إضافية وملاحظات

يمكن ربط المحدد :not() مع محددات :not() أخرى. على سبيل المثال، الكود التالي سيطابق جميع المقالات باستثناء المقال الذي يحمل المعرف #featured، ثم سيستبعد المقالات التي تحمل الفئة .tutorial:

cssCopyEditarticle:not(#featured):not(.tutorial) {
    /* تنسيق المقالات المطابقة */
}

تمامًا مثل العناصر الزائفة الأخرى ومحددات الفئات الزائفة، يمكن ربط :not() مع محددات زائفة أخرى وعناصر زائفة. على سبيل المثال، الكود التالي سيضيف كلمة “جديد!” إلى عناصر القائمة التي لا تحتوي على الفئة .old باستخدام العنصر الزائف ::after:

cssCopyEditli:not(.old)::after {
    content: "New!";
    color: deepPink;
}

يمكنك مشاهدة العرض التوضيحي الحي في القسم أدناه.

حول خصوصية (Specificity) المحددات

تعتمد خصوصية (specificity) الفئة الزائفة :not() على المحدد الذي يتم تمريره إليها كمعامل. بخلاف الفئات الزائفة الأخرى، لا تضيف :not() أي قيمة إضافية إلى خصوصية المحدد.

المحدد البسيط الذي يمكن استخدامه داخل :not() يمكن أن يكون:

• محدد نوع (مثل p، span، إلخ).
• محدد فئة (مثل .element، .sidebar، إلخ).
• محدد معرف (مثل #header).
• محدد فئة زائفة (مثل :first-child، :last-of-type).

ملاحظات:

• لا يمكن تمرير عنصر زائف (مثل ::before أو ::after) كمعامل داخل :not().
• لا يمكن تمرير محدد :not() آخر داخل :not().

ملاحظات إضافية حول الاستخدام

مثل المحددات الزائفة الأخرى، يمكن ربط :not() مع عناصر زائفة أخرى. على سبيل المثال، الكود التالي سيضيف كلمة “جديد!” إلى العناصر التي لا تحتوي على الفئة .old باستخدام العنصر الزائف ::after:

cssCopyEditelement:not(.old)::after {
    content: "New!";
    color: deepPink;
}

يمكنك مشاهدة العرض التوضيحي الحي في القسم أدناه.