()not:

:not() یک pseudo-class نقیض می باشد که انتخابگری را به عنوان آرگومان می گیرد و نقیض آن انتخابگر را انتخاب می کند.

به وسیله این انتخابگر می توان در بین موارد انتخابی استثنا به وجود آورد. تکه کد زیر تمام آیتم های لیست را انتخاب می کند و به رنگ سبز در می آورد به جز آیتم هایی که کلاس bad دارند.

li:not(.bad) {
  color: green;
}

آرگومان های انتخابگر :not() به غیر از کلاس که در بالا نشان داده شد می توانند id, نام تگ, Pseudo-class ها (مثل first-child: و …) و همینطور انتخابگر ویژگی ها ( مثل [type="checkbox"] ) و همینطور انتخابگر سراسری (*) (انتخاب همه عناصر موجود در صفحه ) نیز باشند.

موارد زیر موارد صحیح استفاده از این انتخابگر هستند:

:not(a) {
  انتخاب تمام عناصر صفحه به غیر از عناصر لینک
}

p:not(:first-of-type) {
  انتخاب تمام عناصر پاراگراف به غیر از اولین پاراگراف
}

a:not([href = "http://mojtabaseyedi.com"]) {
  انتخاب تمام لینک های صفحه به غیر از لینکی که به آدرس سایت مجتبی سیدی می رود
}

input[type="text"]:not([disabled="disabled"]) {
  انتخاب تمام عناصر ورودی از نوع متنی به غیر از آن هایی که غیر فعال هستند
}

h1:not(#page-title) {
  انتخاب تمام عناصر عنوان اول در صفحه به غیر از آن یکی که شناسه نوشته شده را دارد
}

مواردی که نمی توان از این انتخابگر استفاده کرد زمانی است که به صورت تودرتو استفاده شود و یا آرگومانش انتخابگرهای pseudo-element ( مثل first-letter: , ::after: ) باشند.

در زیر چند نمونه از استفاده نادرست از این انتخابگر آورده شده است:

p:not(:not(.same)) {}

p:not(:not(:last-child)) {}

:not(::first-letter) {}

a:not(::after) {}

:not() همچنین می تواند به صورت زنجیره ای مورد استفاده قرار بگیرد. در مثال زیر در مرحله اول عناصر مقاله همه انتخاب می شوند به جز عنصری که دارای شناسه featured است, سپس عناصر باقی مانده اگر کلاس tutorial نداشته باشند انتخاب می شوند.

article:not(#featured):not(.tutorial) {
  
}

دموی زیر برای درک بهتر آماده شده است:

See the Pen :not() by Mojtaba Seyedi (@seyedi) on CodePen.

یکی از کاربردهای خوب این انتخابگر این است که به جای اینکه بنویسیم:

li {
  border-bottom: 1px solid red;
}

li:last-child {
  border-bottom: none;
}

می توانیم به این صورت عمل کنیم:

li:not(:last-child) {
  border-bottom: 1px solid red;
}

پشتیبانی مرورگرها

:not() در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا +9.5 , اینترنت اکسپلورر +9 و همینطور در سیستم عامل های اندروید و iOS نیز پشتیبانی می شود.