Seletores do CSS
- Página anterior Sintaxe do CSS
- Próxima página Uso do CSS
Seletores do CSS
Os seletores CSS são usados para “encontrar” (ou selecionar) elementos HTML que precisam de estilos definidos.
Podemos dividir os seletores CSS em cinco categorias:
- Seletor simples (Selecionar elementos com base em nome, id, classe)
- Seletor de compositor(Selecionar elementos com base em uma relação específica entre eles)
- Seletor de pseudo-classe(Selecionar elementos com base em um estado específico)
- Seletor de pseudo-elemento(Selecionar parte de um elemento e definir seu estilo)
- Seletor de atributo(Selecionar elementos com base em atributos ou valores de atributo)
Esta página explicará os seletores CSS mais básicos.
Seletor de elemento CSS
O seletor de elemento selecciona elementos HTML com base no nome do elemento.
Instância
Aqui, todos os elementos <p> na página estarão alinhados no centro e terão a cor de texto vermelha:
p {
text-align: center;
color: red;
}
Seletor id CSS
O seletor id usa a propriedade id do elemento HTML para seleccionar um elemento específico.
O id do elemento é único na página, portanto, o seletor id é usado para seleccionar um elemento único!
Para seleccionar um elemento com um id específico, escreva um número de referência (#) seguido do id do elemento.
Instância
Esta regra CSS será aplicada ao elemento HTML com id="para1":
#para1 {
text-align: center;
color: red;
}
Atenção:Os nomes de id não podem começar com números.
Seletor de classe CSS
O seletor de classe selecciona elementos HTML com uma propriedade class específica.
Para seleccionar elementos com uma classe específica, escreva um ponto (.) seguido do nome da classe.
Instância
Neste exemplo, todos os elementos HTML com class="center" serão vermelhos e alinhados no centro:
.center {
text-align: center;
color: red;
}
Você também pode especificar que apenas elementos HTML específicos serão afectados pela classe.
Instância
Neste exemplo, apenas o elemento <p> com class="center" ficará alinhado no centro:
p.center {
text-align: center;
color: red;
}
Os elementos HTML também podem referenciar várias classes.
Instância
Neste exemplo, o elemento <p> será estilizado com base em class="center" e class="large":
<p class="center large">Este parágrafo referencia duas classes.</p>
Atenção:Os nomes de classe não podem começar com números!
Seletor universal CSS
O seletor universal (*) selecciona todos os elementos HTML na página.
Instância
As seguintes regras CSS afectam todos os elementos HTML na página:
* {
text-align: center;
color: blue;
}
Seletor de agrupamento CSS
Os seletores de agrupamento seleccionam todos os elementos HTML com a mesma definição de estilo.
Veja o código CSS a seguir (os elementos h1, h2 e p têm a mesma definição de estilo):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
É melhor agrupar seletores para reduzir ao máximo o código.
Para agrupar seletores, use vírgulas para separar cada seletor.
Instância
Neste exemplo, agrupamos os seletores mencionados acima:
h1, h2, p {
text-align: center;
color: red;
}
Todos os seletores CSS simples
| Seletor | Exemplo | Descrição do exemplo |
|---|---|---|
| .class | .intro | Selecione todos os elementos com class="intro". |
| #id | #firstname | Selecione o elemento com id="firstname". |
| * | * | Selecione todos os elementos. |
| element | p | Selecione todos os elementos <p>. |
| element,element,.. | div, p | Selecione todos os elementos <div> e todos os elementos <p>. |
Leitura adicional
Livro extra-curricular:Seletor de elemento CSS
Livro extra-curricular:Agrupamento de seletores CSS
Livro extra-curricular:Detalhamento do seletor de classe CSS
Livro extra-curricular:Detalhamento do seletor ID CSS
Livro extra-curricular:Detalhamento do seletor de atributo CSS
Livro extra-curricular:Seletor de descendente CSS
Livro extra-curricular:Seletor de filho CSS
Livro extra-curricular:Seletor de irmão adjacentes CSS
- Página anterior Sintaxe do CSS
- Próxima página Uso do CSS
