Neste tutorial, você aprenderá como aplicar regras de estilo a elementos usando seletores CSS.
O que é um seletor?
Seletores CSS são um padrão para combinar elementos em uma página da web. As regras de estilo associadas a este seletor serão aplicadas aos elementos que correspondem ao padrão do seletor.
Os seletores são um dos aspectos mais importantes do CSS porque permitem que você direcione elementos específicos em uma página da Web de várias maneiras para estilizá-los.
Existem vários tipos de seletores em CSS, vamos dar uma olhada neles mais de perto:
Seletor universal
Os seletores genéricos, representados por um asterisco *, correspondem a todos os elementos da página.
O seletor genérico pode ser omitido se existirem outras condições no elemento. Esse seletor é normalmente usado para remover margens padrão e preenchimento de elementos para testes rápidos.
Vamos tentar o seguinte exemplo para entender como funciona basicamente:
* {
margin: 0;
padding: 0;
}As regras de estilo no seletor * serão aplicadas a todos os elementos do documento.
Nota: Recomenda-se não usar o seletor genérico * com muita frequência na produção, pois esse seletor corresponderá a todos os elementos da página, o que colocará muita pressão no navegador. Use tipo de elemento ou seletores de classe.
Seletor de tipo de elemento
O seletor de tipo de elemento corresponde a todas as instâncias de um elemento no documento com o nome do tipo de elemento correspondente. Vamos tentar um exemplo para ver como funciona:
p {
color: blue;
}As regras de estilo no seletor p serão aplicadas e coloridas em azul para cada elemento (ou parágrafo)
no documento, independentemente de sua posição na árvore do documento.
Atenção! Descubra os melhores cursos de programação neste guia especial: Cursos de Programação.
Seletor de ID
O seletor id é usado para definir regras de estilo para elementos únicos ou exclusivos.
O seletor de id é definido com um sinal de libra # seguido pelo valor de id.
#error {
color: red;
}Essa regra de estilo torna o texto do elemento vermelho com seu atributo ida definido como false.
Observação: o valor do atributo id deve ser exclusivo em um determinado documento, o que significa que dois elementos em um documento HTML não podem compartilhar o mesmo valor de id.
Seletor de classe
O seletor de classe pode ser usado para selecionar qualquer elemento HTML com um atributo class. Todos os elementos com esta classe serão formatados de acordo com as regras definidas.
Os seletores de classe são definidos com um ponto (.) seguido pelo valor da classe.
.blue {
color: blue;
}A regra de estilo acima renderiza o texto azul de cada elemento no documento que possui essa propriedade comoclass está definido como azul. Você pode torná-lo um pouco mais privado. Por exemplo:
p.blue {
color: blue;
}A regra de estilo no seletor p.blue renderiza texto azul somente para elementos cujo atributo class está definido como azul e não tem efeito em outros parágrafos.
Seletor de descendentes
Você pode usar esses seletores quando precisar selecionar elementos que são descendentes de outro elemento, por exemplo, se desejar apenas direcionar âncoras contidas em uma lista não ordenada, não todos os elementos âncora. Vamos ver como isso funciona:
ul.menu li a {
text-decoration: none;
}
h1 em {
color: green;
}As regras de estilo no seletor ul.menu li a só se aplicam a elementos <a> contidos em elementos <ul> com a classe .menu e não têm efeito sobre outros links no documento.
Da mesma forma, as regras de estilo em h1 em seletores só se aplicam a elementos <em> contidos em elementos <h1> e não afetam outros elementos <em>.
Seletor filho
Seletores filho são usados para selecionar apenas os elementos que são filhos diretos de um elemento.
Um subseletor consiste em dois ou mais seletores, separados por um sinal de maior que (>). Por exemplo, você pode usar esse seletor para selecionar o elemento de lista de primeiro nível em uma lista aninhada com vários níveis. Vamos ver um exemplo para entender como funciona:
ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}As regras de estilo no seletor ul > li se se aplicam apenas a elementos <li> que são filhos diretos do elemento <ul> e não têm efeito sobre outros elementos na lista.
Seletor irmão adjacente
O seletor irmão adjacente pode ser usado para selecionar elementos irmãos (ou seja, elementos do mesmo nível). A sintaxe deste seletor é a seguinte: E1 + E2, onde E2 é o destino do seletor.
O seletor h1 + p no exemplo a seguir só selecionará um elemento <p> se os elementos <h1> e <p> compartilharem o mesmo elemento pai na árvore do documento e o <h1> preceder imediatamente o elemento <p>. Isso significa que apenas o parágrafo imediatamente após cada cabeçalho <h1> terá as regras de estilo relevantes. Vamos ver como esse seletor realmente funciona:
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}Seletor irmão universal
O seletor de irmão geral é semelhante ao seletor de irmão adjacente (E1+E2), mas menos rigoroso. Um seletor irmão genérico consiste em dois seletores simples separados por um caractere tio ~ . Ele pode ser escrito como: E1∼E2, onde E2 é o alvo do seletor.
O seletor h1 ∼ p no exemplo abaixo selecionará todos os elementos <p> que precedem o elemento <h1>, onde todos os elementos compartilham o mesmo elemento pai na árvore do documento.
h1 ∼ p {
color: blue;
font-size: 18px;
}
ul.task ∼ p {
color: #f0f;
text-indent: 30px;
}Existem seletores mais complexos como seletores de atributos, pseudoclasses, pseudoelementos. Discutiremos esses seletores em detalhes em capítulos posteriores.
Seletor de grupo
Muitas vezes, vários seletores em uma folha de estilo compartilham a mesma declaração de regra de estilo. Você pode agrupá-los em uma lista separada por vírgulas para minimizar o código na folha de estilo. Também evita que você repita as mesmas regras de estilo várias vezes. vamos ver:
h1 {
font-size: 36px;
font-weight: normal;
}
h2 {
font-size: 28px;
font-weight: normal;
}
h3 {
font-size: 22px;
font-weight: normal;
}Como você pode ver no exemplo acima, a mesma regra de estilo de fonte: normal; é compartilhada pelos seletores h1, h2 e h3, então pode ser agrupada em uma lista separada por vírgulas como esta:
h1, h2, h3 {
font-weight: normal;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}Leia também: HTML 5: guia sobre atributos
