Focus Within

Focus Within lets you target elements based on whether they are focused or contain a focused element, following the Selectors Level 4 specification.

.form-field label {
  /* style a label */
}

.form-field:focus-within label {
  /* style a label differently when .form-field contains a focused input */
}

Focus Within is the companion to PostCSS Focus Within, which is also included PostCSS Preset Env.

In unsupported browsers, the Focus Within polyfill adds a focus-within attribute to elements otherwise matching :focus-within natively. PostCSS Focus Within will duplicate these rules for you. Otherwise, be sure to either duplicate the entire rule, or use the force option.

.form-field label {
  /* style a label */
}

.form-field[focus-within] label {
  /* style a label differently when .form-field contains a focused input */
}

.form-field:focus-within label {
  /* style a label differently when .form-field contains a focused input */
}

The script, including the test and polyfill minify to 434 bytes gzipped or less.

Usage

Add Focus Within to your build tool:

npm install focus-within

Activate Focus Within on the document:

import focusWithin from 'focus-within';

focusWithin(document);

Options

Focus Within accepts a secondary paramater to configure the attribute or class name added to elements matching focused elements or containing focused elements.

focusWithin(document, {
  attr: false,
  className: '.focus-within'
});

Falsey values on either attr or className will disable setting the attribute or class name on elements matching :focus-within.

Focus Within also accepts a secondary paramater to configure whether the polyfill is loaded regardless of support. If force is given a truthy value, then the polyfill will always execute.

focusWithin(document, {
  force: true
});