PostCSS Focus

title="Philosopher’s stone, logo of PostCSS"
src="https://postcss.org/logo-leftp.svg">

[PostCSS] plugin to add :focus-visible selector to every :hover
for keyboard accessibility.

See also [postcss-pseudo-class-enter] for more explicit way.

[postcss-pseudo-class-enter]: https://github.com/jonathantneal/postcss-pseudo-class-enter
[PostCSS]: https://github.com/postcss/postcss

``css
*:focus-visible {
outline: 0;
}
.button:hover {
background: red;
}
`

`css
*:focus-visible {
outline: 0;
}
.button:hover {
background: red;
}
.button:focus-visible {
background: red;
}
`

If there is a :focus-visible selector, it will be excluded
from the processing.

`css
.a:hover, .b:hover {
outline: 0;
}
.b:focus-visible {
background: red;
}
`

`css
.a:hover, .b:hover, .a:focus-visible {
outline: 0;
}
.b:focus-visible {
background: red;
}
``

alt="Sponsored by Evil Martians" width="236" height="54">

Docs

Read full docs here.