CSS :: Псевдокласс :focus-within
Псевдокласс :focus-within
(от англ. focus within – фокус внутри)
позволяет выбрать элемент требуемого типа, когда он сам или его потомки получают фокус, например,
form:focus-within {блок объявлений}
. Псевдокласс может быть полезен для подсветки формы или ее частей, когда
пользователь вводит данные в поля формы.
Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.
Синтаксис
<селектор>:focus-within {блок объявлений}
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:focus-within
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Оформим немного отступы и границу формы */ form{ margin: 1em; padding: 0.5em; border: 1px solid #DDD; border-radius: 0.3em; } /* Подсветим всю форму во время работы с ней */ form:focus-within{ border: 1px solid black; } </style> </head> <body> <form action="http://localhost/test/php/script_1.php" method="POST"> <label for="number_field">Введите число от 1 до 10: </label> <input type="number" id="number_field"><br><br> <button type="reset">Сброс</button> <button type="submit" disabled>Отправить</button> </form> </body> </html>
Пример №1