CSS: Guia Prático de Seletores

CSS (Cascading Style Sheets) é um mecanismo utilizada para estilizar e organizar a apresentação de páginas web. Uma das habilidades fundamentais para designers e desenvolvedores web é a capacidade de usar seletores CSS de maneira eficaz.

Seletores são padrões que correspondem a elementos específicos no DOM (Document Object Model) de uma página. Eles são cruciais para aplicar estilos de forma precisa.

Vamos explora os tipos mais comuns de seletores CSS, oferecendo uma visão clara através de exemplos práticos.

1. Seletor de Tipo

O seletor de tipo seleciona todos os elementos de um determinado tipo no documento HTML.

p {
  color: blue;
}

Este código CSS aplica a cor azul a todos os elementos <p> (parágrafos) na página.

2. Seletor de Classe

Seleciona elementos que têm uma classe específica atribuída. As classes são reutilizáveis e um elemento pode ter várias classes.

.minha-classe {
  font-weight: bold;
}

Este exemplo torna o texto de todos os elementos com a classe minha-classe em negrito.

3. Seletor de ID

Um ID é único dentro de uma página. O seletor de ID permite estilizar um elemento específico.

#meu-id {
  background-color: yellow;
}

Isso aplica um fundo amarelo ao elemento com o ID meu-id.

4. Seletor de Atributo

Os seletores de atributo visam elementos com base em seus atributos e valores de atributos.

input[type="text"] {
  border-color: red;
}

Esse código CSS modifica a cor da borda de todos os elementos input do tipo texto para vermelho.

5. Seletor Descendente

Seleciona elementos que estão aninhados dentro de outros, independentemente do nível de profundidade.

div span {
  color: green;
}

Todos os span dentro de uma div serão coloridos de verde.

6. Seletor Filho Direto

Aponta para elementos que são filhos diretos de outro elemento.

ul > li {
  padding: 5px;
}

Adiciona um preenchimento de 5px a todos os itens de lista que são filhos diretos de uma lista não ordenada (ul).

7. Seletor Adjacente Direto

Seleciona um elemento que é imediatamente precedido por outro específico.

h2 + p {
  font-size: 14px;
}

Isso estiliza o primeiro parágrafo que segue imediatamente qualquer <h2> com um tamanho de fonte de 14px.

8. Seletor de Irmãos Gerais

Afeta elementos que são irmãos gerais de um elemento especificado, compartilhando o mesmo elemento pai.

h1 ~ p {
  margin-top: 20px;
}

Todos os parágrafos que compartilham o mesmo pai com um h1 terão uma margem superior de 20px.

9. Seletor Universal

O seletor universal é útil para aplicar um estilo a todos os elementos dentro de um contexto específico.

* {
  box-sizing: border-box;
}

Este código define o box-sizing de todos os elementos para border-box.

10. Seletor de Pseudoclasse

Permite estilizar elementos com base em seu estado ou condição, como :hover ou :focus.

a:hover {
  color: purple;
}

Muda a cor de todos os links para roxo quando o mouse passa sobre eles.

11. Seletor de Pseudoelemento

Utilizado para estilizar partes específicas de um elemento, como a primeira linha ou a primeira letra.

p::first-letter {
  font-size: 200%;
}

Aumenta o tamanho da primeira letra de cada parágrafo.

Seletores CSS são ferramentas poderosas que permitem manipular a aparência de uma página web com precisão. A compreensão e o uso eficaz desses seletores podem melhorar significativamente a qualidade e a eficiência do seu trabalho de design e desenvolvimento web. Experimente combinar diferentes seletores para alcançar resultados complexos e específicos.