Від автора: всім привіт. Сьогодні ми з вами розглянемо досить специфічну тему. А саме, як працює в 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;
}
Ось такий код дозволить вам виключити третій абзац і йому не буде поставлено зелений колір.
В умови до селектору not, яке зазначається в дужках, ви можете використовувати селектори будь-якого рівня складності і вкладеності. Тобто якщо ви напишете щось в цьому дусі:
.class:not(p.red:nth-of-type(7)){}
То все це без проблем буде працювати, але тільки за умови, що зазначений в умові елемент є й виключати.
Застосування в реальній практиці
Добре, ми розглянули досить відірвані від реальності приклади, але і в реальній практиці псевдоклас not може вам стане в нагоді. Наприклад, при роботі з меню.
Якщо в меню є роздільники, то зазвичай роздільник не повинен бути присутнім у першого або останнього пункту меню. І це дуже легко реалізувати. Просто задаємо першому або останньому пункту якоїсь стильової клас, або виключаємо його з допомогою nth-child/nth-of-type.
Знову ж таки, тут цілком можна було б обійтися і без not. Ви можете спочатку задати роздільники для всіх пунктів, а потім просто перевизначити для потрібного пункту стиль, прибравши цей роздільник. Але це вже зажадає від вас написати на 2-4 рядки коду більше. У випадку з not ж ви дуже елегантно в одному рядку вирішуєте всю проблему.
Відповідно, приклад з роздільниками я привів тому, що він найбільш часто мені зустрічався. На ділі ж при верстці реальних макетів таких моментів у вас може проскочити чимало.
Псевдоклас not дуже зручно використовувати, коли потрібно вибрати групу елементів і прив’язати до них стилі, але при цьому виключити з цієї групи 1-2 елемента. Раджу вам взяти на озброєння цю можливість css і використовувати її у верстці.
