إستخدام :not() في CSS

مرحبا بك في مقالة جديدة حول اداة من أهم الأدوات التي يوفرها CSS هي قدرتك على انتقاء واستهداف العناصر بشكل دقيق للغاية. وفي حين أن معظم المطورين على دراية بالمنتقيات الأساسية مثل الفئات والمعرفات، إلا أن هناك العديد من أدوات الانتقاء المتقدمة التي قد تكون مفيدة أيضًا. واحدة من هذه الأدوات القوية هي شعبة الانتقاء :not() .

ما هي :not() وكيف تعمل؟

تسمح لك :not() بانتقاء عناصر HTML بناءً على ما لا تريد أن تنطبق عليها. تأخذ :not() منتقيًا بسيطًا أو قائمة من المنتقيات كوسيطة، وتنطبق على أي عنصر لا يطابق هذا المنتقي أو القائمة. على سبيل المثال:

li:not(.active) {
  color: #999;
}

هذا سينطبق على جميع عناصر القائمة

ما عدا تلك التي لديها فئة .active

استخدام قوائم المنتقيات مع :not()

ميزة رائعة أخرى للـ :not() هي القدرة على استخدام قوائم المنتقيات كوسيطة. يسمح لك هذا بانتقاء العناصر التي لا تطابق مجموعة من المنتقيات:

div:not(.modal, .sidebar, .offscreen) {
  opacity: 1;
}

ستنطبق هذه الخاصية على أي عنصر

لا يحمل أيًا من الفئات .modal أو .sidebar أو .offscreen .

تجنب المشاكل مع :not()

على الرغم من قوة :not() ، إلا أنه هناك بعض القيود التي يجب مراعاتها. لا يمكنك استخدام شعب العناصر الوهمية مثل ::before و ::after كوسيطة لـ :not() . كما لا يمكن أيضًا تضمين :not() داخل :not() آخر.

كما يجب أن تكون حذرًا مع محددات الأولوية عند استخدام :not() . محدد الأولوية لـ :not() هو نفس محدد أولوية وسيطتها. لذلك إذا استخدمت معرف كوسيطة مثل :not(#modal) ، فسيكون لديك بعض المشاكل مع محدد الأولوية.

أمثلة على استخدامات :not()

هناك العديد من الاستخدامات الرائعة لـ :not() . يمكنك استخدامها لتطبيق نمط افتراضي على العناصر، ما لم تكن لديها فئة معينة:

a:not([class]) {
  color: blue;
}

أو لاستثناء عناصر child المباشرة من نمط معين:

    
ul:not(:first-child) {
  margin-top: 1rem; 
}

يمكنك أيضًا استخدام :not() مع اختيارات أكثر تعقيدًا للحصول على مستويات عالية من التحكم في تنسيق عناصرك.

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

المتصفحات تدعم :not()

تم إدراج :not() ككائن CSS صالح في مواصفات CSS 3، لذلك يدعمها جميع المتصفحات الحديثة الرئيسية منذ فترة طويلة. إليك ملخص لدعم المتصفح: دعم المتصفحات الحديثة:

• - Chrome: كامل الدعم منذ إصدار 1.0
• - Firefox: كامل الدعم منذ إصدار 1.0
• - Safari: كامل الدعم منذ إصدار 3.2
• - Opera: كامل الدعم منذ إصدار 9.0
• - Edge: كامل الدعم منذ إصدار 12

دعم المتصفحات القديمة:

• - Internet Explorer 9+: دعم كامل
• - Internet Explorer 8: لا يدعم :not()
• - أقدم إصدارات Firefox/Chrome/Safari/Opera: لا يدعم :not()

بالإضافة إلى ذلك، تدعم إصدارات متصفحات الأجهزة المحمولة الحديثة :not() بشكل كامل أيضًا، بما في ذلك iOS Safari و Android Browser. ميزة دعم القوائم كحجج لـ :not() هناك ميزة أخرى داخل :not() وهي القدرة على استخدام قوائم من المنتقيات كحجج. هذه الميزة أحدث قليلاً، مع دعم كالتالي:

• - Safari 9+
• - Firefox 63+
• - Chrome 88+
• - Opera 74+

بشكل عام، يمكنك استخدام :not() بثقة في أي موقع ويب حديث يستهدف المتصفحات الحديثة الشائعة. ولكن إذا كنت بحاجة إلى دعم متصفحات أقدم، فقد ترغب في النظر في استخدام بديل أو تقنية مساعدة.

شارك Share Tweet Share Share Share

انقر هنا

محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام