CSS приклад: Псевдокласс :not

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 1.0+ 1.0+ 1.0+ 1.0+

Коротка інформація

Застосовується До всіх елементів
Посилання на специфікацію http://www.w3.org/TR/css3-selectors/#negation

Версії CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Опис

Псевдоклас :not встановлює правила стилів для елементів, які не містять вказаний селектор.

Синтаксис

елемент:not(<селектор>) { ... }

У якості селектора можуть вказуватися псевдокласи, теги, ідентифікатори, класи та селектори атрибутів. Неможливо використовувати псевдоклас :not (конструкція :not(:not(...)) заборонена) та псевдоелементи.

Значення

Немає.

Приклад

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
   input:not([type="submit"]) {
    border: 1px solid #ccc;
    padding: 3px;
   }
  </style>
 </head>
 <body>
  <form>
   <p>Ваше ім'я: <input name="user"></p>
   <p>Прикріплений файл: <input type="file" name="file"></p>
   <p><input type="submit" value="Відправити"></p>
  </form>
 </body>
</html>

У цьому прикладі стиль застосовується до всіх тегів <input>, за винятком тега, в параметрах якого встановлено type="submit" (кнопка "Відправити"). Результат прикладу показано на рис. 1.

Рис. 1. Результат використання псевдокласу :not

SEO текст: "Псевдоклас :not у CSS встановлює стилі для елементів, які не відповідають певному селектору. Навчіться застосовувати цей псевдоклас для більш гнучкого керування дизайном вашого веб-сайту."

Часті запитання

  • Q: Як використовувати псевдоклас :not в CSS?

    A: Псевдоклас :not в CSS використовується для вибору елементів, які не відповідають заданому селектору. Наприклад: div:not(.special) вибере всі div елементи, які не мають класу special.

  • Q: Як використовувати псевдоклас :not для вибору елементів за тегом?

    A: Приклад використання псевдокласу :not для вибору елементів за тегом: p:not(.special) вибере всі <p> елементи, які не мають класу special.

  • Q: Чи можна вкладати псевдоклас :not один в одного?

    A: Так, псевдоклас :not можна вкладати один в одного. Наприклад: :not(:not(.special)) вибере елементи, які мають клас special.

  • Q: Як використовувати псевдоклас :not для вибору конкретного елемента?

    A: Приклад використання псевдокласу :not для вибору конкретного елемента: a:not([href='https://www.example.com']) вибере всі <a> елементи, які не мають посилання на https://www.example.com.

  • Q: Чи є підтримка псевдокласу :not у всіх браузерах?

    A: Псевдоклас :not є підтримуваним у більшості сучасних браузерах, включаючи Chrome, Firefox, Safari, Edge. Проте, потрібно перевіряти його підтримку у старіших версіях браузерів.