CSS - Seletores

João E. -

Introdução aos Seletores CSS

Seletores CSS são um conceito básico no desenvolvimento web que permitem direcionar e estilizar elementos HTML específicos em uma página da web. Eles são padrões usados para selecionar os elementos que você deseja estilizar, com base em seu tipo, classe, ID, atributo ou relação com outros elementos.

Os seletores CSS oferecem controle sobre a estilização das suas páginas web. Com seletores, você pode aplicar estilos a elementos específicos ou grupos de elementos com base em certas condições. Essa precisão permite criar estilos consistentes e de fácil manutenção em todo o seu site.

A sintaxe básica de um seletor CSS consiste no nome do seletor seguido por chaves {}. Dentro das chaves, você define os estilos que deseja aplicar.

Exemplo: Selecionar todos os elementos de parágrafo e tornar sua cor de texto azul

p {
  color: blue;
}

p é o seletor que direciona todos os elementos <p>, e color: blue; define a cor do texto.

Os seletores CSS podem ser mais complexos do que apenas direcionar elementos pelo nome da tag. Você pode usar nomes de classe, IDs, atributos e vários outros seletores para direcionar elementos específicos ou grupos deles. As seções a seguir abordarão diferentes tipos de seletores CSS e como usá-los em suas folhas de estilo.

Tipos de Seletores CSS

O CSS oferece diferentes tipos de seletores que permitem selecionar elementos com base em vários critérios.

Seletores de Elemento

Seletores de elemento selecionam elementos com base em seu nome de tag. Eles selecionam todas as instâncias de um elemento HTML específico em uma página.

Para usar um seletor de elemento, simplesmente use o nome da tag sem nenhum prefixo.

Exemplo: Selecionar todos os elementos <h1> e tornar seu texto vermelho

h1 {
  color: red;
}

Outros exemplos incluem p, div, a, img.

Seletores de Classe

Seletores de classe selecionam elementos com base em seu atributo de classe. Eles permitem selecionar elementos que pertencem a uma classe específica.

Para criar um seletor de classe, use um ponto (.) seguido pelo nome da classe.

Exemplo: Selecionar elementos com a classe 'highlight' e dar a eles um fundo amarelo

.highlight {
  background-color: yellow;
}

Você pode aplicar uma classe a um elemento adicionando o atributo class à tag HTML:

Exemplo: Aplicar uma classe a um elemento

<p class="highlight">Este parágrafo terá um fundo amarelo.</p>

Um elemento pode ter várias classes, separando-as com espaços:

Exemplo: Um elemento com várias classes

<p class="highlight bold">Este parágrafo terá um fundo amarelo e texto em negrito.</p>

Seletores de ID

Seletores de ID selecionam elementos com base em seu atributo ID único. Eles selecionam um elemento com um ID específico.

Para criar um seletor de ID, use uma hashtag (#) seguida pelo nome do ID.

Exemplo: Selecionar o elemento com o ID 'header' e tornar seu texto maiúsculo

#header {
  text-transform: uppercase;
}

Você pode aplicar um ID a um elemento adicionando o atributo id à tag HTML:

Exemplo: Aplicar um ID a um elemento

<h1 id="header">Este título estará em maiúsculas.</h1>

A principal diferença entre classes e IDs é que os IDs são únicos e usados uma vez por página, enquanto as classes podem ser reutilizadas várias vezes.

Seletores de Atributo

Seletores de atributo selecionam elementos com base em seus atributos ou valores de atributos.

Para criar um seletor de atributo, use colchetes ([]) e especifique o nome do atributo ou o nome e o valor.

Exemplo: Selecionar todos os elementos <a> com o atributo 'target' e tornar seu texto em negrito

a[target] {
  font-weight: bold;
}

Você também pode selecionar elementos com base no valor:

Exemplo: Selecionar todos os elementos <input> com type='text' e dar a eles bordas

input[type="text"] {
  border: 1px solid black;
}

Seletores de atributo oferecem flexibilidade na seleção com base em atributos.

Seletores Descendentes

Seletores descendentes selecionam descendentes de outro elemento.

Para criar este seletor, use espaço entre os seletores ancestral e descendente.

Exemplo: Selecionar todos os <p> dentro de <div>

div p {
  font-style: italic;
}

Isso seleciona todos os <p> dentro de qualquer nível de aninhamento dentro de <div>.

Seletores Filhos

Seletores filhos selecionam filhos diretos de outro elemento.

Use o sinal maior que (>) entre pai-filho para este seletor:

Exemplo: Selecionar filhos diretos <li> em <ul>

ul > li {
  list-style-type: none;
}

A diferença do descendente é que o filho seleciona apenas filhos imediatos.

Seletor de Irmão Adjacente

O seletor de irmão adjacente seleciona irmãos adjacentes que compartilham o mesmo pai diretamente ao lado um do outro usando um sinal de mais (+).

Exemplo: Selecionar o primeiro <p> imediatamente após <h2>

h2 + p {
  margin-top: 10px;
}

Isso seleciona o primeiro <p> após <h2>.

Seletor de Irmão Geral

O seletor de irmão geral seleciona irmãos que compartilham o mesmo pai, não necessariamente ao lado um do outro, usando um til (~).

Exemplo: Selecionar todos os <p> irmãos de <h2>

h2 ~ p {
  padding-left: 20px;
}

Isso seleciona todos os <p> irmãos em qualquer posição relativa a <h2>.

Seletor de Pseudo-classe

O seletor de pseudo-classe seleciona elementos com base em um estado ou condição específica usando dois pontos (:) seguidos pelo nome.

Exemplo: Mudar a cor quando o mouse passar por cima

a:hover {
  color: red;
}

Outros exemplos incluem :active, :focus, :visited, :first-child.

Seletor de Pseudo-elemento

O seletor de pseudo-elemento permite selecionar e estilizar partes sem modificar a estrutura HTML usando dois pontos duplos (::) seguidos pelo nome.

Exemplo: Inserir conteúdo antes de cada <h1>

h1::before {
  content: "→";
}

Outros exemplos incluem ::after, ::first-letter, ::first-line.

Combinando Seletores

O CSS permite combinar múltiplos seletores para criar estilos mais específicos. Ao usar uma combinação de seletores, você pode aplicar estilos a elementos que atendam a vários critérios.

Para combinar seletores, escreva-os um após o outro sem espaços entre eles. A ordem dos seletores é importante, pois determina a especificidade e como os estilos serão aplicados.

Exemplo: Selecionar todos os elementos <p> com a classe 'highlight' dentro de uma <div>

div p.highlight {
  background-color: yellow;
  font-weight: bold;
}

Ao combinar seletores, é importante entender a especificidade e a ordem em cascata. A especificidade determina quais estilos têm precedência quando múltiplos seletores se aplicam ao mesmo elemento. Quanto mais específico for um seletor, maior será sua prioridade.

A ordem de especificidade, do mais alto para o mais baixo, é:

  1. Estilos inline (aplicados diretamente usando o atributo style)
  2. Seletores de ID
  3. Seletores de classe, seletores de atributo e seletores de pseudo-classe
  4. Seletores de elemento e seletores de pseudo-elemento

Se dois seletores tiverem a mesma especificidade, o que aparecer por último na folha de estilos terá precedência.

Exemplo: Entendendo a Especificidade

/* Seletor de elemento */
p {
  color: black;
}

/* Seletor de classe */
.highlight {
  color: blue;
}

/* Seletor de ID */
#special {
  color: red;
}
<p class="highlight" id="special">Este parágrafo terá texto vermelho.</p>

O parágrafo terá texto vermelho porque o seletor de ID tem a maior especificidade.

Ao combinar seletores, mantenha suas seleções simples e específicas o máximo possível para melhorar a legibilidade e a manutenção de suas folhas de estilo. Evite combinações excessivamente complexas ou longas, a menos que seja necessário.

Exemplo: Mantendo Seletores Simples e Específicos

/* Evite seletores complexos */
div.container p.highlight span.bold {
  font-weight: bold;
}

/* Prefira seletores mais simples e específicos */
.highlight .bold {
  font-weight: bold;
}

O segundo seletor é mais simples, tornando-o mais fácil de entender e manter.