Pseudoklasa CSS :focus-within wybiera element, jeśli on sam lub którykolwiek z jego potomków jest w stanie gotowości do przyjmowania danych wejściowych, czyli wybiera każdy element, który zostałby wybrany przez pseudoklasę :focus lub zawiera element potomny, który zostałby wybrany przez tę pseudoklasę.
Przykład użycia :focus-within
W poniższym przykładzie kliknięcie w którymkolwiek polu tekstowym formularza spowoduje pojawienie się jasnoróżowego obrysu o grubości jednego piksela wokół całego formularza.
<style>
form:focus-within {
outline: 2px solid lightpink;
}
label {
display: block;
margin-bottom: 10px;
}
</style>
...
<form action="skrypt.php">
<label>Imię: <input></label>
<label>Nazwisko: <input></label>
<input type="button" value="Wyślij">
</form>Efekt zastosowania tego kodu w przeglądarce:
Składnia :focus-within
Składnia pseudoklasy :focus-within:
:focus-within {...}