کاربرد شبه‌کلاس :not() در CSS

مقدمه

یک قاعده‌ی CSS یا CSS Rule از یک بخش انتخابگر (selector) و یک بخش استایل‌ها (styles) تشکیل شده است. روال معمول به این صورت است که یک انتخابگر CSS یک یا چند عنصر را انتخاب کرده و استایل‌های تعریف‌شده در بخش styles روی آن عنصر یا عناصر اعمال می‌شود. اما گاهی ممکن است در وضعیتی باشیم که بخواهیم یک یا چند عنصر از بین عناصر انتخاب‌شده را از دریافت استایل‌ها معاف کنیم. یعنی یک انتخابگر، مثلاً n عنصر را در وضعیت انتخاب قرار دهد اما ما می‌خواهیم m عنصر از n عنصر را از انتخاب خارج کنیم (همه‌ی فرزندان تقی به جز اکبر). در چنین شرایطی، یک شبه‌کلاس (pseudo class) با نام :not() کار مورد نظر ما را انجام می‌دهد. در این مقاله، ابتدا نگاه گذرایی خواهیم داشت به مفهوم شبه‌کلاس‌ها در CSS و سپس، با نحوه‌ی استفاده از شبه‌کلاس :not() و کاربردهای آن آشنا می‌شویم.

انتخابگرهای شبه‌کلاس در CSS

CSS شامل انتخابگرهای متعددی است که کار انتخاب عناصر برای استایل‌دهی را انجام می‌دهند. برای مثال، فرض کنید بخواهیم همه‌ی پاراگراف‌های موجود در صفحه را انتخاب کرده و سپس، ترتیبی دهیم که با رنگ آبی نمایش داده شوند. کافیست از یک انتخابگر نوع (type selector) مانند زیر استفاده کنیم:

p{
    color: blue;
}

شبه‌کلاس‌ها (pseudo -selectors) کلمات کلیدی هستند که می‌توانیم به یک انتخابگر اضافه کنیم. برای مثال، با استفاده از یک شبه‌کلاس با نام :required می‌توانیم ترتیبی بدهیم که یک عنصر فرم را بسته به اینکه یک فیلد اجباری است یا خیر، انتخاب کنیم. یا یک شبه‌کلاس با نام :first-child به ما امکان می‌دهد که عناصر را بر اساس موقعیتی که در سند دارند، انتخاب کنیم.

یک شبه‌کلاس پرکاربرد دیگر :visited است که به ما امکان می‌دهد لینک‌هایی را انتخاب و استایل‌دهی کنیم که توسط کاربر مشاهده شده‌اند. این امر باعث می‌شود کاربران بدانند روی کدام یک از لینک‌ها کلیک کرده‌اند.

a:visited{
    color: lightgreen;
}

کاربرد شبه‌کلاس :not()

شبه‌کلاس :not() به نوعی پیاده‌سازی‌کننده‌ی عملگر نفی یا نقیض در انتخابگرهاست. این شبه‌کلاس عناصری را انتخاب می‌کند که با هیچ یک از انتخابگرهای تعیین‌شده مطابقت ندارند یا به عبارت دیگر، توسط هیچ‌یک از انتخابگرهای تعیین‌شده، انتخاب نمی‌شوند.

اجازه دهید مثالی را با هم ببینیم. فرض کنید می‌خواهید همه‌ی عناصر code موجود در صفحه را انتخاب کنید به‌جز عناصر code که درون عنصر h2 قرار دارند. این کار را می‌توانیم به صورت زیر انجام دهیم:

code:not(h2>code){
    color: red;
}

همانطور که می‌بینید، کلمه کلیدی :not() به انتخابگر code اضافه شده و انتخابگر h2>code به عنوان آرگومان به این شبه‌کلاس پاس شده است.

البته مطابق مستندات ماژول CSS Selectors Level 3 آرگومان شبه‌کلاس :not() می‌تواند فقط شامل یک انتخابگر ساده باشد. انتخابگر ساده انتخابگری است که شامل یک ترکیب‌گر (combinator) مانند > نباشد. مثال زیر را ببینید:

:not(.cost){
    font-family: Helvetica;
}

در اینجا هر عنصری که فاقد کلاس cost باشد، انتخاب شده و با فونت Helvetica نمایش داده می‌شود.

اعمال شبه‌کلاس :not() روی چند انتخابگر پیچیده

با ارائه‌ی مستندات ماژول CSS Selectors Level 4 و پشتیبانی این سطح از ماژول در مرورگرها، این امکان فراهم شده تا بتوان از انتخابگرهای پیچیده (complex selectors) نیز به عنوان آرگومان شبه‌کلاس :not() استفاده کرد. انتخابگر پیچیده انتخابگری است که شامل ترکیب‌گرها (combinators) مانند space و > باشد.

به این ترتیب، می‌توانیم از شبه‌کلاس :not() به صورت زیر نیز استفاده کنیم:

input:not(:required){
    color: #919191;
}

این انتخابگر باعث می‌شود که همه‌ی عناصر input که اجباری نیستند، انتخاب شده و با یک رنگ خاکستری تیره نمایش داده شوند.

همچنین، می‌توانیم بیش از یک انتخابگر را به عنوان آرگومان شبه‌کلاس :not() تعیین کنیم که در این صورت، باید انتخابگرها را با کاما از هم جدا کنیم:

input:not(:required, [type="button"]){
    background-color: blue;
}

در اینجا همه‌ی عناصر input که اجباری نیستند و از نوع button نیستند، انتخاب شده و با پس‌زمینه‌ی آبی نماش داده می‌شوند.

انتخابگرهای چندگانه برای شبه‌کلاس :not()

در CSS وقتی بخواهیم استایل‌های یکسانی را روی چند عنصر اعمال کنیم، می‌توانیم یک لیست از انتخابگرها را که با کاما از هم جدا شده‌اند، به عنوان یک انتخابگر چندگانه تعریف کنیم. مثال زیر را ببینید:

h1,
h2,
h3{
    background-color: blue;
}

در مورد شبه‌کلاس :not() نیز کار مشابهی قابل انجام است. فرض کنید یک فرم داریم و می‌خواهیم فقط فیلدهای متنی قابل ویرایش (editable text fields) را استایل‌دهی کنیم. در فرم مثال زیر، فیلدهای Employed، Employment و Country فیلدهایی هستند که باید از دریافت استایل معاف شوند و بنابراین، باید آنها را به به‌کلاس :not() پاس کنیم:

<form>
    <label for="name" class="name">Name:</label>
    <input type="text" id="name" name="name" value="Enter Your Name" />
                          
    <label for="emp" class="emp">Employed:</label>
    <select name="emp" id="emp" disabled>
        <option selected>No</option>
        <option>Yes</option>
    </select>
                          
    <label for="empDate">Employment Date:</label>
    <input type="date" name="empDate" id="empDate" />
                          
    <label for="country">Country:</label>
    <input
      type="text"
      name="country"
      id="country"
      value="United States"
      readonly
    />
                          
    <label for="resume">Resume:</label>
    <input type="file" name="resume" id="resume" />
</form>

نتیجه‌ی مورد نظر را می‌توانیم با استفاده از شبه‌کلاس :not() به صورت زیر، بدست آوریم. رنگ پس‌زمینه‌ی lightyellow روی همه‌ی عناصر input که صفت disabled یا readonly را دارا نباشند یا از نوع date نباشند، اعمال خواهد شد.

input:not([disabled], [readonly], [type="date"]){
    background-color: lightyellow;
}