• How to use
• Browser support
• :focus-within MDN

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus.

More information on MDN.

This package is available both as production ready script and as a package. The script can be downloaded here, or install the package as follow.

# npm
npm install focus-within-polyfill --save

# yarn
yarn add focus-within-polyfill

When the polyfill is included via a script tag it will run immediately after load. On the other hand when imported as a dependency, a call to polyfill method is required.

import focuswithin from "focus-within-polyfill";

// kick off!
focuswithin.polyfill();

• Natively supported in Chrome
• Natively supported in Firefox
• Natively supported in Safari
• Natively supported in Opera
• IE 11
• Edge

• Write some tests and examples
• Publish on npm