Применение CSS к типам полей: 'text', 'password', 'not checkbox'

Быстрый ответ

В CSS оператор "или" оказывается как перечисление селекторов через запятую. Для исключения элементов применяются псевдоклассы :not(). Примеры использования:

/* Окрашиваем текстовые и email-поля в алый цвет как сигнал тревоги */
input[type="text"], input[type="email"] {
  color: red;
}

/* Другим элементам форм не нужно лишнего увесистости. Сделаем их получше */
input:not([type="checkbox"]) {
  padding: 10px;
}

Эффективность использования псевдокласса :not()

Псевдокласс :not() изначально предназначен для исключения определённых элементов, но можно также комбинировать их для формирования сложных селекторов исключения:

/* Освободим чекбоксы и радиокнопки от рамок, чтобы они были готовы к летнему стилю */
input:not([type="checkbox"]):not([type="radio"]) {
  border: 1px solid blue;
}

В будущем, с появлением CSS4, можно будет использовать в :not() несколько селекторов, что значительно упрощает код:

/* Теперь всё выполнено максимально лаконично и понятно */
input:not([type="checkbox"], [type="radio"]) {
  border: 1px solid blue;
}

Использование каскадирования

Впускаем каскад в свою техническую зону, чтобы применять и грациозно переопределять стили, например, для элементов с типом checkbox:

/* Облачим все поля ввода в уютный одеяло светло-серого цвета */
input {
  background: lightgray;
}

/* Но чекбоксы, пусть сохранят свою натуральность, ведь внимание к ним наивысшее */
input[type="checkbox"] {
  background: white;
}

Познавание ограничений синтаксиса CSS

Вопреки всему разнообразию способов стилизации CSS, он имеет свои пределы. Для выполнения сложных логических функций лучше выбрать JavaScript.

Поддержка браузеров

Не забудьте протестировать свои стили в разнообразных браузерах, чтобы разрешить проблемы неравномерного отображения псевдоклассов.

Подвызов JavaScript на помощь

Когда сил CSS не хватает для выполнения условий "или" и "не", на помощь приходит JavaScript, способный справиться с более сложными задачами.

Визуализация

Представьте себе светофор, который контролирует работу CSS-селекторов:

Светофор для селекторов CSS:
| Режим  | Можно                 | Стоп                     |
|--------|-----------------------|--------------------------|
| И      | ✅🎯 #id и .class       | 🚫 При отсутствии элемента |
| ИЛИ    | ✅🎯 #id или .class     | 🚫 При отсутствии обоих   |
| НЕ     | ✅🎯 Всё, кроме .class  | 🚫 Только .class          |

Каждый цвет светофора воплощает правило выбора селекторов в CSS.

Соведение специфичности CSS

Столкнулись с проблемой конкурирующих стилей? Понимание специфичности CSS вам поможет восстановить порядок.

Вспоминание практических применений

Помните практические примеры, такие как оформление полей ввода в формах в соответствии с их типами или создание переключателей темы с применением селекторов.

Поддержание производительности на высоте

Оптимизация — это ключ к быстрой работе и заметной скорости загрузки сайта. Эффективные селекторы как тренинг для вашего сайта.

Полезные материалы

1. Селекторы CSS – Каскадные таблицы стилей | MDN — подробный справочник по CSS-селекторам.
2. Уровень селекторов 4 — подробное изучение :matches() для работы с условиями в CSS.
3. Всё, что вы хотели знать о селекторах атрибутов CSS | CSS-Tricks — обучение использованию селекторов атрибутов на высоком уровне.
4. Почему селектор jQuery :not() не работает в CSS? – Stack Overflow — обсуждение специфики работы :not() в CSS.
5. Логические свойства и значения CSS – Каскадные таблицы стилей | MDN — занурьтесь в мир логических свойств и значений CSS.
6. :not() – Каскадные таблицы стилей | MDN — пошаговое руководство по использованию псевдокласса :not() в CSS.
7. Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и др. — проверьте поддержку браузерами псевдокласса :matches().