Як працює в CSS псевдоклас not

17

Від автора: всім привіт. Сьогодні ми з вами розглянемо досить специфічну тему. А саме, як працює в css псевдоклас not. Можливо, багато хто з вас взагалі нічого не знають про нього, але тим не менш даний псевдоклас іноді дуже допомагає при верстці. Докладно суть роботи з ним розглянемо зараз.

Як працює в CSS псевдоклас not

Взагалі як виглядає вибір елементів css? Ви прописуєте який-небудь селектор і таким чином відбувається вибір. Наприклад: p{} – вибере всі абзаци; table{} – вибере всі таблиці;

І так далі. Так от, псевдоклас not працює навпаки – він не дозволяє вибрати який-небудь елемент. Сам по собі псевдоклас застосовувати немає сенсу, а лише в зв’язці з іншими селекторам. Not дозволяє як би виключити елемент вибору. Наприклад, вибрати всі списки, крім якогось одного.

Приклад роботи псевдокласу not я зараз спробую написати. Отже, є три абзаци, в кожному є якийсь текст.

Абзац 1

Абзац 2

Абзац 3

Як бачите, третьому параграфі ми дали стильової клас. Припустимо, ви хочете зробити колір тексту у всіх пунктах, крім одного – зеленим. Пишемо ось так:

p:not(.p3){
color: green;
}

Тепер всі, абсолютно всі абзаци будуть зеленими, крім тих, у яких є стильової клас p3. Стильовий клас ми поставили просто для того, щоб мати можливість звернутися до нього і виключити абзаци.

Синтаксис псевдокласу not, як ви вже могли здогадатися, такий:

:not(селектор)

У випадку з абзацами ми цілком могли обійтися і без стильового класу. Давайте його приберемо у третього абзацу і подумаємо, як його тепер можна виключити? Ну звичайно, в голову в першу чергу приходить nth-child або nth-of-type. Це псевдокласи, які дозволяють вибрати елемент за його порядковому номеру в батьківському елементі.

p:not(:nth-of-type(3)){
color: green;
}

Ось такий код дозволить вам виключити третій абзац і йому не буде поставлено зелений колір.

Як працює в CSS псевдоклас not

В умови до селектору not, яке зазначається в дужках, ви можете використовувати селектори будь-якого рівня складності і вкладеності. Тобто якщо ви напишете щось в цьому дусі:

.class:not(p.red:nth-of-type(7)){}

То все це без проблем буде працювати, але тільки за умови, що зазначений в умові елемент є й виключати.

Застосування в реальній практиці

Добре, ми розглянули досить відірвані від реальності приклади, але і в реальній практиці псевдоклас not може вам стане в нагоді. Наприклад, при роботі з меню.

Якщо в меню є роздільники, то зазвичай роздільник не повинен бути присутнім у першого або останнього пункту меню. І це дуже легко реалізувати. Просто задаємо першому або останньому пункту якоїсь стильової клас, або виключаємо його з допомогою nth-child/nth-of-type.

Знову ж таки, тут цілком можна було б обійтися і без not. Ви можете спочатку задати роздільники для всіх пунктів, а потім просто перевизначити для потрібного пункту стиль, прибравши цей роздільник. Але це вже зажадає від вас написати на 2-4 рядки коду більше. У випадку з not ж ви дуже елегантно в одному рядку вирішуєте всю проблему.

Відповідно, приклад з роздільниками я привів тому, що він найбільш часто мені зустрічався. На ділі ж при верстці реальних макетів таких моментів у вас може проскочити чимало.

Псевдоклас not дуже зручно використовувати, коли потрібно вибрати групу елементів і прив’язати до них стилі, але при цьому виключити з цієї групи 1-2 елемента. Раджу вам взяти на озброєння цю можливість css і використовувати її у верстці.