Псевдокласс :focus | Справочник CSS
http://belarusweb.net
Основы создания сайтов

Псевдокласс :focus

Описание

Псевдокласс :focus (от англ. focusфокус) позволяет выбрать элемент требуемого типа, который в данный момент находится в фокусе, например, span:focus {блок объявлений}.

Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием ':'. При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

Синтаксис

<селектор>:focus {блок объявлений}

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		button:focus, p:focus{
		color: red;			 
		}
		
	</style>
	
</head>
<body>

	<p contenteditable>
		Когда я в фокусе, мой текст имеет красный цвет.
	</p>
	
	<button>Нажми меня!</button>
	
</body>
</html>

Пример №1