-
Notifications
You must be signed in to change notification settings - Fork 8.1k
/
index.md
47 lines (32 loc) · 1.01 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
---
title: ":focus"
slug: Web/CSS/:focus
---
{{CSSRef}}
## Resumo
A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) `:focus` do CSS é aplicada quando um elemento recebe foco, o que pode ocorrer quando o usuário seleciona o elemento utilizando o teclado ou ativando o mesmo com o mouse (ex: um campo de um formulário).
A pseudo classe é aplicada apenas ao elemento focado, e não aos seus elementos ascendentes, como ocorre com {{ Cssxref(":checked") }} e {{ Cssxref(":enabled") }} e diferentemente de {{ Cssxref(":active") }} ou {{ Cssxref(":hover") }}.
## Sintaxe
```
elemento:focus { ... }
```
## Exemplos
```css
.nome:focus {
color: red;
}
.sobrenome:focus {
color: lime;
}
```
```html
<input class="nome" value="Esse elemento ficará vermelho quando focado" />
<input
class="sobrenome"
value="Esse elemento ficará verde-limão quando focado" />
```
{{ EmbedLiveSample('Exemplos', '', '', '', 'Web/CSS/:focus') }}
## Especificações
{{Specifications}}
## Compatibilidade com navegadores
{{Compat}}