Focus vs Focus-Within vs Focus-Visible

What are these pseudo-classes and how does each differ from the other

Photo by AbsolutVision on Unsplash
/* Selects any <input> when focused */
input:focus {
background: yellow;
color: red;
}
/* Selects a <div> when one of its descendants is focused */
div:focus-within {
background: cyan;
}
.next-image-button:focus {
outline: none;
}
.next-image-button:focus-visible {
outline: 3px solid currentColor; /* That'll show 'em */
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store