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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі