الفرق بين المراجعتين لصفحة: «CSS/:not»

المراجعة الحالية بتاريخ 16:20، 3 أكتوبر 2018

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

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

مسودة Selectors Level 4.
مواصفة Selectors Level 3.

@@ سطر 16: / سطر 16: @@
 == أمثلة ==
 لاحظ كيف استخدمنا الصنف الزائف <code>‎:not()</code>‎ في المثال الآتي:<syntaxhighlight lang="html">
-<p>I am a paragraph.</p>
+<p>أنا عنصر نص</p>
-<p class="fancy">I am so very fancy!</p>
+<p class="fancy">أنا جداً سعيد</p>
-<div>I am NOT a paragraph.</div>
+<div>أنا لست عنصر نص</div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 .fancy {