Применение псевдокласса в CSS

В этом кратком обзоре мы рассмотрим, для каких целей используется псевдокласс :focus-within в CSS и как его можно применять.

Что такое псевдокласс

?

Псевдокласс :focus-within применяется к элементу, который находится в фокусе, или к элементу, который содержит потомков, находящихся в фокусе.

Состояние в фокусе (:focus) — это состояние элемента при клике по нему мышкой или при выборе с помощью клавиши Tab на клавиатуре. Например, это состояние свойственно для поля ввода или ссылки.

Основное отличие

от

Псевдокласс :focus применяется только к элементу, находящемуся в фокусе, не распространяясь на его родителя. В отличие от этого, :focus-within позволяет выбирать элемент, содержащий дочерний элемент, находящийся в фокусе, или несколько элементов-потомков с потенциальным состоянием :focus.

Примеры использования

Изменение свойств формы

Псевдокласс :focus-within полезен, когда нужно изменить свойства формы, если одно из ее полей ввода находится в фокусе.

<form class="form">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<textarea placeholder="Message"></textarea>
</form>

.form:focus-within {
border: 2px solid blue;
}

<table>
<tr>
<td><input type="text" placeholder="Cell 1"></td>
<td><input type="text" placeholder="Cell 2"></td>
</tr>
<tr>
<td><input type="text" placeholder="Cell 3"></td>
<td><input type="text" placeholder="Cell 4"></td>
</tr>
</table>

tr:focus-within {
background-color: lightgrey;
}