Os elementos `<input>`, `<textarea>`, `<button>` e `<a>` tem esse estado por padrão, mas algumas vezes nós precisamos utilizar coisas mais genéricas e sem valor semântico, como a `<div>` ou `<span>`.

Para isso, muitos blogs e fóruns recomendam o uso do `:focus-within`, mas nem sempre ele atende às nossas necessidades e pode acabar sendo um pouco confuso.

Então espero poupar o seu trabalho e o tempo que passei pesquisando e testando para chegar nesse truque de CSS:

## Uso/Exemplos

```html
<div tabindex=“1”>
    Eu sou uma div e agora você pode utilizar o <code>:focus</code> em mim!
</div>
```

```css
div:focus {
    background: pink;
    border: 1px solid red;
}
```
DONE! Agora você pode adicionar estilos de :focus a outros elementos que não os principais.

Utilize o tabindex com moderação, ele pode quebrar um pouco da acessibilidade e navegação do site.
## Autores

- [@peterpaulodev](https://www.instagram.com/peterpaulodev/)

Aplicando :focus do CSS para div’s! (E outros elementos)

Os elementos `, , e tem esse estado por padrão, mas algumas vezes nós precisamos utilizar coisas mais genéricas e sem valor semântico, como a ou `. Para isso, muitos blogs e fóruns recome...