soy Kseso y esto EsCSS

La pseudoclase CSS :focus-within

Qué es y cómo aplica la pseudoclase CSS :focus-within. Demo incluída.

La pseudoclase CSS :focus-within

·Por Kseso ✎ 4
La pseudoclase CSS focus-within

La "nueva" pseudoclase CSS :focus-within la engloba el documento Selectors Level 4 entre las relativas a las acciones del usuario (User Action Pseudo-classes).

La primera parte de su nombre :focus- ya indica por donde va: la pseudoclase CSS aplicará a un determinado elemento al recibir el foco tras alguna acción del usuario. Pero para eso ya existe "desde siempre" la pseudoclase :focus a secas. Así que algo más debe aportar.

Y este "algo más" es que extiende "el recibir el foco un elemento" a que sea sobre él o sobre cualquier otro elemento contenido en él. Esto es, aplica los estilos si el elemento o alguno de sus hijos reciben el foco.

Veamos un ejemplo. Tengamos el siguiente código:

<fieldset class='user-datos' tabindex='1'> <legend>Datos personales</legend> <label for='nombre'>Nombre <input type='text' id='nombre' tabindex='2' /> </label> <label for='Apellido-1'>1º Apellido <input type='text' id='Apellido-1' tabindex='3' /> </label> <label for='Apellido-2'>2º Apellido <input type='text' id='Apellido-2' tabindex='4' /> </label> </fieldset>

Nota que tanto el fieldset como cada uno de los input's tienen su correspondiente atributo tabindex Pero no así los label's

Al que aplicamos el siguiente CSS:

fieldset:focus-within { background: tomato; } label:focus-within, input:focus { background: #3f5771; color: #fff; }

El resultado de aplicar la pseudoclase CSS :focus-within será que el fieldset se mostrará con fondo de color tomate al recibir el foco sobre él y también lo mantendrá al pasar a cualquiera de los input's que contiene.

Y otro tanto ocurre con cada label al recibir el foco el input que tiene como hijo.

En estos momentos (Abril 2017) la pseudoclase CSS :focus-within es soportada por
Firefox 52
Safari 10.1
Chrome 60
Han anunciado su soporte Chrome en la versión 59 y en Opera 46 previa activación del flag de las novedades CSS. Y en caniuse puedes ver el soporte en cada momento.

Puedes ver la pseudoclase CSS :focus-within en acción en la siguiente demo:

See the Pen :focus-within by Kseso (@Kseso) on CodePen.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso