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

Примеры

HTML Результат

htmlCodes

<!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> &nbsp; 
		<input type="number" id="number_field"><br><br> 
		
		<button type="reset">Сброс</button> &nbsp; 
		<button type="submit" disabled>Отправить</button>
		
	</form>
  
</body>
</html>

Пример №1