الصنف ‎:not()

من موسوعة حسوب
< CSS
مراجعة 16:20، 3 أكتوبر 2018 بواسطة Riyad-khalifeh (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

الصنف الزائف ‎: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

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