شبه کلاس not چیست؟
فرض کنید بخواهید به تمام المان ها و غیره یک رنگ خاص بدهید بجز پاراگراف های متن، اگر بخواهیم تمام المان ها و کلاس ها و … را تک به تک تایپ کنیم و بعد به آنها رنگ مورد نظرمان را اعمال کنیم زمان بر خواهد بود در حالی که انجام این کار به کمک شبه کلاس not در زبان CSS بسیار ساده است به مثال زیر توجه کنید:
/* Elements that are not <p> elements */
body :not(p) {
color: red;
}
همان طور که گفته شد در کد بالا تمام المان ها بجز المان های <p> انتخاب خواهند شد و به رنگ قرمز در خواهند آمد. شاید جالب باشد بدانید در کد بالا لازم نبود حتماً body را بنویسم اما با توجه به اینکه بهتر است صرفا استایل به زیر مجموعه های body اعمال شود آن را تایپ کردم.
با توجه به عملکرد شبه کلاس not در زبان CSS، به آن شبه کلاس معکوس (negation pseudo-class) نیز می گوییم. باید توجه داشته باشید داخل پرانتز not نباید یک شبه کلاس معکوس دیگر بنویسید و نیز نباید داخل آن از شبه المان ها استفاده کنید (مشابه شبه کلاس های is و where) و در نهایت هر بخش از انتخابگرها که در این پرانتز وارد می کنید باید با کاما (،) از یکدیگر جدا شوند.
نکات و جزئیات not
در استفاده از not برخی عملکرد های و نتایج احتمالا دور از ذهن هستند که در این بخش سعی می کنم به آنها بپردازم:
- نوشتن انتخابگر های بی استفاده مثل
:not(*)بلامانع است گرچه هیچ چیزی انتخاب نمی شود و هیچ استایلی اعمال نخواهد شد. - استفاده از not موجب افزایش اولویت (specificity) خواهد شد. برای مثال
#foo:not(#bar)که در عمل انتخابگر تفاوتی با#fooندارد اما اولویت بالاتر نسبت به آن دارد و بر استایلهای آن غلبه (override) خواهد کرد. - not اولویتی برابر با اولویت انتخابگر درون پرانتز خود دارد. برای مثال
:not(:is(argument))
اولویت در این کد برابر با is خواهد بود. :not(.foo)همه چیز به جز کلاس foo را انتخاب می کند حتی تگ هایی مثل <html> و <body>- قاعده اصلی not یعنی هر چیزی به جز آنچه داخل پرانتز است گاهی نتایج دور از ذهن را موجب می شود برای مثال اگر از آن در کنار ترکیب کننده تک فاصله (اکثرا یک فاصله خالی بین دو انتخابگر است) (descendant combinators) استفاده کنیم مانند
body :not(table) aهمچنان لنگر های (a) داخل جدول (table) انتخاب می شوند چرا که زیرمجموعه های (فرزند) جدول مثل <tr>، <tbody>،<th>، <td>، <caption>و غیره جدا از خود جدول محسوب می شوند و همچنان انتخاب می شوند. - دو عبارت
:not(.foo, .bar)و:not(.foo):not(.bar)تفاوتی با هم ندارند. - not یک انتخابگر بخشنده (Forgiving Selector Parsing) نیست به این معنی که اگر حتی یکی از انتخابگر های نوشته شده داخل پرانتز not اشتباه باشد و یا توسط مرورگر پشتیبانی نشود کل عبارت not مردود و اشتباه تلقی می شود. برای رفع این مشکل می توانید داخل پرانتز از یک شبه کلاس is استفاده کنید چراکه is یک انتخابگر بخشنده است. مثال: عبارت
:not(.foo, :invalid-pseudo-class)کاملا اشتباه تلقی می شود اما با استفاده از is بصورت:not(:is(.foo, :invalid-pseudo-class))مشکل را حل می کند و همه چیز به جز کلاس foo انتخاب خواهد شد و بخش اشتباه نادیده گرفته می شود.
بخشی عمده از مقاله بالا برگرفته از وبسایت MDN است.
بدون دیدگاه