Os seletores de CSS são usados para “encontrar” (ou selecionar) os elementos HTML que você deseja estilizar.
Podemos dividir os seletores CSS em cinco categorias:
1. Seletores simples (selecione elementos com base no nome, ID, classe)
2. Seletores combinadores (selecione elementos com base em um relacionamento específico entre eles)
3. Seletores de pseudo-classe (selecione elementos com base em um determinado estado)
4. Seletores de pseudoelementos (selecione e estilize uma parte de um elemento)
5. Seletores de atributos (selecione elementos com base em um atributo ou valor de atributo)
Esta página explicará os seletores CSS mais básicos.
<!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 identificação usa o atributo de identificação de um elemento HTML para selecionar um elemento específico.
A identificação de um elemento é única dentro de uma página; portanto, o seletor de identificação é usado para selecionar um elemento exclusivo!
Para selecionar um elemento com um ID específico, escreva um caractere de hash (#), seguido pelo ID do elemento.
Exemplo
A regra CSS abaixo será aplicada ao elemento HTML com id = “para1”:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">HOla mundo</p>
<p>Este parágrafo não é afetado pelo estilo.</p>
</body>
</html>
Seletor de classe seleciona elementos HTML com um atributo de classe específico.
Para selecionar elementos com uma classe específica, escreva um caractere de ponto (.), Seguido pelo nome da classe.
Exemplo
Neste exemplo, todos os elementos HTML com class = “center” ficarão vermelhos e alinhados ao centro:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Cabeçalho vermelho e alinhado ao centro</h1 class="center">
<p class="center">Vermelho e no centro.</p>
</body>
</html>
Você também pode especificar que apenas elementos HTML específicos sejam afetados por uma classe.
Exemplo
Neste exemplo, apenas os elementos <p> com class = “center” serão alinhados ao centro:
p.center {
text-align: center;
color: red;
}
Exemplo
Neste exemplo, o elemento <p> será denominado de acordo com class = “center” e class = “large”:
<!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>
O CSS Universal Selector
O seletor universal (*) seleciona todos os elementos HTML na página.
Exemplo
A regra CSS abaixo afetará todos os elementos HTML da página:
* {
text-align: center;
color: blue;
}
Exemplo:
<!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 CSS
O seletor de agrupamento seleciona todos os elementos HTML com as mesmas definições de estilo.
Observe 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.
h1, h2, p {
text-align: center;
color: red;
}
<!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>
<< Anterior Sintaxe CSS
Deixe um comentário