Um seletor CSS seleciona os elementos HTML que você quer estilizar.
Seletores CSS são usados para "encontrar" (ou selecionar) os elementos HTML que você quer estilizar.
Podemos dividir os seletores CSS em cinco categorias:
Seletores simples (selecione elementos com base no nome, id, classe)
Seletores combinadores (selecione elementos baseados em uma relação específica entre eles)
Seletores de pseudoclasse (selecionam elementos com base em um determinado estado)
Seletores de pseudo-elementos (selecione e estilizar uma parte de um elemento)
Seletores de atributos (selecionam elementos com base em um atributo ou valor de atributo)
Esta página explicará os seletores CSS mais básicos.
O seletor de elementos seleciona elementos HTML com base no nome do elemento.
Aqui, todos os elementos <p> da página serão alinhado ao centro, com texto em vermelho:
p
{
text-align: center;
color: red;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
O seletor de 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 é costumava ser selecione um elemento único!
Para selecionar um elemento com um id específico, escreva um caractere hash (#), seguido por o id do elemento.
A regra CSS abaixo será aplicada ao elemento HTML com id="para1":
#para1
{
text-align: center;
color: red;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Nota: Um nome de ID não pode começar com um número!
O seletor de classe seleciona elementos HTML com um atributo de classe específico.
Para selecionar elementos com uma classe específica, escreva um ponto final (.), seguido do nome da classe.
Neste exemplo, todos os elementos HTML com class="center" serão vermelhos e alinhados ao centro:
.center {
text-align: center;
color: red;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Você também pode especificar que apenas elementos HTML específicos devem ser afetados por uma classe.
Neste exemplo apenas os elementos <p> com class="center" serão vermelho e alinhado ao centro:
p.center {
text-align: center;
color: red;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Elementos HTML também pode se referir a mais de uma classe.
Neste exemplo o elemento <p> será estilizado de acordo com class="center" e para class="grande":
<p class="center large">This paragraph refers to two classes.</p>Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Nota: O nome de uma classe não pode começar com um número!
O seletor universal (*) seleciona todos os HTML elementos na página.
A regra CSS abaixo afetará todos os elementos HTML da página:
*
{
text-align: center;
color: blue;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
O seletor de agrupamento seleciona todos os elementos HTML com o mesmo estilo definições.
Observe o seguinte código CSS (os elementos h1, h2 e p têm os mesmos 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.
Neste exemplo agrupamos os seletores do código acima:
h1, h2, p
{
text-align: center;
color: red;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Seletor:
#id
Exemplo:
#firstname
Exemplo de descrição: Seleciona o elemento com id="firstname"
Seletor:
.class
Exemplo:
.intro
Exemplo de descrição: Seleciona todos os elementos com class="intro"
Seletor:
element.class
Exemplo:
p.intro
Exemplo de descrição: seleciona apenas <p> elementos com class="intro"
Seletor:
*
Exemplo:
*
Exemplo de descrição: Seleciona todos os elementos
Seletor:
element
Exemplo:
p
Exemplo de descrição: Seleciona todos os elementos <p>
Seletor:
element,element,..
Exemplo:
div, p
Exemplo de descrição: Seleciona todos os elementos <div> e todos os elementos <p>