La pseudo-clase :focus-within es una selecciona un elemento que consiste en un elemento enfocado como hijo. Las reglas de CSS se aplican cuando cualquier elemento secundario obtiene el foco. El ejemplo incluye hacer clic en un enlace, seleccionar una entrada, etc.
Sintaxis:
:focus {
/* CSS Properties */
}
Ejemplo: a continuación se muestra el ejemplo que ilustra el uso de :focus-within pseudo-class Selector.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
form {
border: 2px solid red;
padding: 15px;
width: 30%;
}
form:focus-within {
background: #ff8;
color: black;
}
input {
margin: 5px;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<form>
<label>Geek 1</label>
<input type="text">
<br>
<label>Geek 2</label>
<input type="text">
</form>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Firefox
- Borde
- Ópera
- Safari
- Internet Explorer (no compatible).
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA