O seletor de tag, também chamado de seletor de elemento, permite aplicar estilos diretamente às tags HTML.
Ele é utilizado quando desejamos alterar todos os elementos de um determinado tipo.
É uma regra CSS que seleciona todos os elementos de uma determinada tag.
p {
color:#333;
}
O exemplo altera todos os parágrafos da página.
elemento {
propriedade: valor;
}
Exemplo:
h1 {
color:blue;
}
| Seletor | Elemento selecionado |
|---|---|
| h1 | Títulos principais. |
| p | Parágrafos. |
| img | Imagens. |
| a | Links. |
| table | Tabelas. |
HTML
<p>
Curso de Desenvolvimento Web
</p>
CSS
p {
font-size:18px;
color:black;
}
O seletor de tag afeta todos os elementos daquele tipo.
h2 {
color:green;
}
Todos os elementos <h2> receberão o mesmo estilo.
Podemos combinar tags e classes para criar regras mais específicas.
p.destaque {
color:red;
}
Apenas parágrafos com a classe destaque serão alterados.
Permite selecionar elementos dentro de outros elementos.
div p {
color:blue;
}
Seleciona apenas parágrafos que estão dentro de uma div.
Utiliza o símbolo maior que (>).
nav > a {
color:red;
}
Seleciona apenas links diretamente dentro do menu.
Seleciona elementos que possuem o mesmo nível.
h1 + p {
color:gray;
}
Permite aplicar o mesmo estilo para várias tags.
h1,
h2,
h3 {
font-family:Arial;
}
Parágrafo utilizando seletor de tag CSS.
| Vantagem | Resultado |
|---|---|
| Simplicidade | Código fácil de escrever. |
| Aplicação rápida | Estiliza vários elementos. |
| Organização | Define padrões gerais. |
| Erro | Problema |
|---|---|
| Usar tag para tudo | Perde flexibilidade. |
| CSS muito genérico | Afeta elementos incorretos. |
| Não combinar seletores | Menos controle. |
| Conceito | Descrição |
|---|---|
| Seletor de Tag | Seleciona elementos HTML. |
| Exemplo | p, h1, div, img. |
| Uso ideal | Estilos gerais. |