Seletores CSS
Um seletor CSS seleciona o(s) elemento(s) HTML que você deseja estilizar.
Seletores CSS
Seletores CSS são usados para "encontrar" (ou selecionar) os elementos HTML que você deseja estilizar.
Podemos dividir os seletores CSS em cinco categorias:
- Seletores simples (selecione elementos com base no nome, id, classe)
- Seletores de combinação (selecione elementos com base em um relacionamento específico entre eles)
- Seletores de pseudo-classe (selecionar elementos com base em um determinado estado)
- Seletores de pseudo-elementos (selecione e estilize uma parte de um elemento)
- Seletores de atributo (selecione elementos com base em um atributo ou valor de atributo)
Esta página explicará os seletores CSS mais básicos.
O seletor de elementos CSS
O seletor de elemento seleciona elementos HTML com base no nome do elemento.
Exemplo
Aqui, todos os elementos <p> na página serão alinhados ao centro, com uma cor de texto vermelha:
p
{
text-align: center;
color: red;
}
O seletor de id CSS
O seletor id usa o atributo id de um elemento HTML para selecionar um elemento específico.
O id de um elemento é único dentro de uma página, então o seletor de id é usado para selecionar um elemento único!
Para selecionar um elemento com um id específico, escreva um caractere hash (#), seguido do id do elemento.
Exemplo
A regra CSS abaixo será aplicada ao elemento HTML com id="para1":
#para1
{
text-align: center;
color: red;
}
Nota: Um nome de id não pode começar com um número!
O seletor de classe CSS
O seletor de classe seleciona elementos HTML com um atributo de classe específico.
Para selecionar elementos com uma classe específica, escreva um caractere ponto (.), seguido do nome da classe.
Exemplo
Neste exemplo, todos os elementos HTML com class="center" serão vermelhos e alinhados ao centro:
.center {
text-align: center;
color: red;
}
Você também pode especificar que apenas elementos HTML específicos devem ser afetados por uma classe.
Exemplo
Neste exemplo, apenas os elementos <p> com class="center" serão vermelhos e alinhados ao centro:
p.center {
text-align: center;
color: red;
}
Elementos HTML também podem se referir a mais de uma classe.
Exemplo
Neste exemplo, o elemento <p> será estilizado de acordo com class="center" e class="large":
<p class="center large">This paragraph refers to two classes.</p>
Nota: Um nome de classe não pode começar com um número!
O seletor universal CSS
O seletor universal (*) seleciona todos os elementos HTML na página.
Exemplo
A regra CSS abaixo afetará todos os elementos HTML na página:
*
{
text-align: center;
color: blue;
}
O seletor de agrupamento CSS
O seletor de agrupamento seleciona todos os elementos HTML com as mesmas definições de estilo.
Veja o seguinte código CSS (os elementos h1, h2 e p têm as mesmas definições de estilo):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Será melhor agrupar os seletores, para minimizar o código.
Para agrupar seletores, separe cada seletor com uma vírgula.
Exemplo
Neste exemplo agrupamos os seletores do código acima:
h1, h2, p
{
text-align: center;
color: red;
}
Todos os seletores simples CSS
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |