Seletores são utilizados para "encontrar" (ou selecionar) elementos baseados em seus nomes, id, classe, atributo etc.
O seletor elemento seleciona elementos baseado no nome do elemento.
Podemos selecionar todos os elementos <p> desta forma (neste caso, todos os elementos <p> estarão centralizado e serão vermelhos.
p {
text-align: center;
color: red;
}
O atributo class especifica uma ou mais classes para um elemento. Pode ser usado pelo CSS para atribuir estilo a todos os elementos de determinada classe.
O seletor classe seleciona elementos com um atributo classe específico.
Para selecionar uma classe, utiliza-se o caractere . (ponto), seguido pelo nome da classe.
<!DOCTYPE html>
<html>
<head>
<title>Classes</title>
<meta charset="utf-8">
<style>
.cidades {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="cidades">Londres</h2>
<p>Londres é a capital da Inglaterra.</p>
<h2 class="cidades">Paris</h2>
<p>Paris é a capital da França.</p>
<h2 class="cidades">Tóquio</h2>
<p>Tóquio é a capital do Japão.</p>
</body>
</html>
Podemos também selecionar apenas alguns elementos específicos que serão afetados por uma classe.
p.center {
text-align: center;
color: red;
}
O atributo id especifica uma identificação nome exclusiva para o elemento. Pode ser usado pelo CSS para atribuir estilo a um único elemento.
O seletor id usa o atributo id para selecionar um elemento específico.
Para selecionar um elemento com um id específico, utiliza-se o caractere # seguido do id do elemento.
<!DOCTYPE html>
<html>
<head>
<title>Atributo id</title>
<meta charset="utf-8">
<style>
#titulo {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="titulo">Isto é um cabeçalho</h1>
</body>
</html>
NOTA: Um id DEVE ser único dentro do arquivo HTML.
Se houverem elementos com as mesmas definições de estilo, por exemplo:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Então se pode agrupar os seletores, de forma a diminuir o código.
Para agrupá-los, separa-se cada seletor por vírgula.
h1, h2, p {
text-align: center;
color: red;
}