الصنف ‎:not()

من موسوعة حسوب
< CSS
مراجعة 16:20، 3 أكتوبر 2018 بواسطة Riyad-khalifeh (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

الصنف الزائف ‎:not()‎ في CSS (أي pseudo-class) يُمثِّل العناصر التي لا تُطابِق مُحدِّدًا أو أكثر، يسمى هذا الصنف أيضًا بصنف النفي الزائف (negation pseudo-class).

هذا المُحدِّد يُحدِّد أيّة عناصر ليست <p>:

:not(p) {
  color: blue;
}

ملاحظات:

  • يمكن كتابة مُحدِّدات ليس لها فائدة، مثل ‎:not(*)‎ التي تُطابِق أيّ عنصر ليس عنصرًا، أي أنَّ هذا المُحدِّد لن يُطبَّق أبدًا.
  • يمكن أن يزيد هذا الصنف من درجة التحديد للقاعدة، فمثلًا المُحدِّد ‎#foo:not(#bar)‎ يؤدي إلى مطابقة ما يطابقه ‎#foo لكن بدرجة تحديد أكبر.
  • المُحدِّد ‎:not(.foo)‎ سيُطابِق كل العناصر التي ليس لها الصنف foo بما في ذلك <html> و <body>.
  • سيُطبَّق هذا المُحدِّد على عنصر واحد، أي لا يمكنك استخدامه لاستثناء جميع العناصر الأب، فمثلًا المُحدِّد body :not(table) a سيُطبَّق على الروابط الموجودة داخل الجدول، لأنَّ العنصر <tr> سيُطابَق لأنه ليس جدولًا.

يقبل الصنف الزائف ‎:not()‎ قائمةً من المُحدِّدات مفصولٌ بينها بفاصلة، ولا يجوز أن تحتوي تلك المُحدِّدات على أصناف زائفة أخرى. لاحظ أنَّ دعم استخدام أكثر من مُحدِّد ما يزال ضعيفًا (راجع قسم «دعم المتصفحات»):

:not( <selector># )

أمثلة

لاحظ كيف استخدمنا الصنف الزائف ‎:not()‎ في المثال الآتي:

<p>أنا عنصر نص</p>
<p class="fancy">أنا جداً سعيد</p>
<div>أنا لست عنصر نص</div>

شيفرة CSS:

.fancy {
  text-shadow: 2px 2px 3px gold;
}

p:not(.fancy) {
  color: green;
}

body :not(p) {
  text-decoration: underline;
}

body :not(div):not(span) {
  font-weight: bold;
}

body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 9.0 9.5 3.2
أكثر من مُحدِّد غير مدعومة غير مدعومة غير مدعومة غير مدعومة 9.0

مصادر ومواصفات