A sintaxe fundamental do CSS segue o padrão:

seletor { propriedade1: valor1; propriedade2: valor2; }

Vamos detalhar os diversos tipos de seletores disponíveis:

• Seletores de Contexto: Permitem selecionar elementos com base em seus elementos ancestrais ou irmãos.
• Seletores de ID e Classe: Utilizam os atributos id e class para identificar elementos.
• Seletores de Atributo: Selecionam elementos com base na presença ou valor de seus atributos.

Seletores de Contexto

Baseados em Ancestrais

Podemos selecionar um elemento filho especificando seu ancestral:

ancestral filho { declaração }
ancestral ... ancestral_proximo neto { declaração }

O 'ancestral' pode ser o pai direto ou qualquer elemento superior na hierarquia.

Seletor de Descendente (Espaço em branco)

Este seletor seleciona todos os elementos filhos, netos, etc., dentro de um elemento ancestral especificado.

<style>
   article h3 { color: red; } /* Seleciona todos os h3 dentro de article */
   article section p { color: blue; } /* Seleciona todos os p dentro de sections que estão dentro de article */
</style>

<article>
   <header>
       <h3>Cabeçalho</h3>
   </header>
   <section>
       <p>Parágrafo dentro da seção</p>
   </section>
   <footer>
       <span>Rodapé</span>
   </footer>
</article>

Seletor Filho Direto (>)

Seleciona apenas os filhos diretos do elemento pai.

pai > filho { declaração }

O elemento pai deve ser o contêiner imediato do elemento filho.

<style>
   article > h3 { color: red; } /* Seleciona apenas h3 que são filhos diretos de article */
   article > section > p { color: blue; } /* Seleciona apenas p que são filhos diretos de section, que por sua vez é filho direto de article */
</style>

<article>
   <header>
       <h3>Cabeçalho</h3>
   </header>
   <section>
       <p>Parágrafo interno</p>
   </section>
   <footer>
       <span>Rodapé</span>
   </footer>
</article>

No exemplo acima, o seletor article > h3 não afetaria um h3 dentro de um header que fosse filho direto de article, pois o header é o filho direto, não o h3.

Seletor de Irmão Adjacente (+)

Seleciona um elemento que está imediatamente após outro elemento irmão.

elemento1 + elemento2 { declaração }

elemento2 deve seguir elemento1 diretamente, sem outros elementos no mesmo nível.

<style>
   header + section { color: red; }  /* Seleciona section que segue imediatamente header */
   header + footer { color: blue; } /* Não funcionará se houver outros elementos entre header e footer */
</style>

<article>
   <header>
       <h3>Cabeçalho</h3>
   </header>
   <section>
       <p>Parágrafo</p>
   </section>
   <footer>
       <span>Rodapé</span>
   </footer>
</article>

Seletor de Irmão Geral (~)

Seleciona todos os elementos irmãos que vêm após um elemento especificado.

elemento1 ~ elemento2 { declaração }

elemento2 deve vir após elemento1, não necessariamente de forma adjacente.

<style>
   header ~ section { color: red; }  /* Seleciona section que segue header */
   header ~ footer { color: blue; } /* Seleciona footer que segue header */
</style>

<article>
   <header>
       <h3>Cabeçalho</h3>
   </header>
   <section>
       <p>Parágrafo</p>
   </section>
   <footer>
       <span>Rodapé</span>
   </footer>
</article>

Seletor Universal (*)

O asterisco é um curinga que corresponde a qualquer elemento.

<style>
   * { color: red; } /* Aplica vermelho a todos os elementos */
   footer * { color: blue; } /* Sobrescreve a cor para elementos dentro de footer */
</style>

<article>
   <header>
       <h3>Cabeçalho</h3>
   </header>
   <section>
       <p>Parágrafo</p>
   </section>
   <footer>
       <span>Rodapé</span>
   </footer>
</article>

Seletores de ID e Classe

IDs e classes oferecem uma maneira de selecionar elementos sem depneder estritamente da hierarquia do documento. Ao adicionar os atributos id e class a elementos HTML, podemos referenciá-los diretamente no CSS.

Observação: Nomes de id e class não devem começar com números ou caracteres especiais. Um id deve ser único em um documento HTML.

Atributo class

Utilizado para aplicar estilos a múltiplos elementos.

/* Sintaxe básica */
.nome-da-classe { declaração }

/* Seletor de tag com classe */
tag.nome-da-classe { declaração }

/* Seletor de múltiplas classes */
.classe1.classe2 { declaração }

<style>
   .cabecalho { color: red; }          /* Aplica a qualquer elemento com class="cabecalho" */
   div.rodape { color: blue; }         /* Aplica a div com class="rodape" */
   .corpo.conteudo { color: darkred; } /* Aplica a elementos com ambas as classes */
</style>

<div class="artigo">
   <div class="cabecalho">Texto do cabeçalho</div>
   <div class="corpo conteudo">Conteúdo principal</div>
   <div class="rodape">Texto do rodapé</div>
</div>

Atributo id

Similar à classe, mas o id deve ser único por página.

/* Sintaxe básica */
#id-unico { declaração }

/* Seletor de tag com id */
tag#id-unico { declaração }

<style>
   #cabecalho { color: red; }     /* Aplica ao elemento com id="cabecalho" */
   div#corpo { color: blue; }     /* Aplica a div com id="corpo" */
</style>

<div id="artigo">
   <div id="cabecalho">Texto do cabeçalho</div>
   <div id="corpo">Conteúdo principal</div>
   <div id="rodape">Texto do rodapé</div>
</div>

ID vs. Classe: Para estilização, prefira classes. Use IDs para manipulação com JavaScript ou para referências únicas e específicas quando estritamente necessário.

Seletores de Atributo

Permitem estilizar elementos com base em seus atributos HTML.

/* Seleciona elementos que possuem o atributo */
tag[nome-do-atributo] { declaração }

/* Seleciona elementos com um atributo e valor específicos */
tag[nome-do-atributo="valor-exato"] { declaração }

/* Outros seletores de atributo incluem:
  [attr^="valor"] - Atributo começa com "valor"
  [attr$="valor"] - Atributo termina com "valor"
  [attr*="valor"] - Atributo contém "valor"
  [attr~="valor"] - Atributo contém "valor" como uma palavra inteira (separada por espaços)
  [attr|="valor"] - Atributo começa com "valor" seguido por um hífen
*/

<style>
   div[title] { color: red; } /* Seleciona divs que têm o atributo title */
   div[title="rodape"] { color: blue; } /* Sobrescreve para divs com title="rodape" */
</style>

<div title="cabecalho">Cabeçalho</div>
<div title="corpo">Corpo</div>
<div title="rodape">Rodapé</div>

Pseudo-classes

Pseudo-classes aplicam estilos a elementos quando eles estão em um determinado estado ou posição na estrutura do documento. Elas são indicadas por um único cólon (:), enquanto pseudo-elementos usam dois cólons (::) em CSS3.

Pseudo-classes de UI (Interface do Usuário)

Estilizam elementos com base em sua interação ou estado.

Pseudo-classes de Links

Frequentemente usadas com o elemento a:

• :link: Link não visitado.
• :visited: Link já visitado.
• :hover: Mouse sobre o link.
• :active: Link em processo de ativação (clique).

Ordem importante: Use na sequência :link, :visited, :hover, :active para garantir a correta aplicação dos estilos.

<style>
   a { text-decoration: underline; }
   a:link { color: green; }
   a:visited { color: black; }
   a:hover { color: red; }
   a:active { color: cyan; }
</style>

<a href="https://exemplo.com" target="_blank">Link de Exemplo</a>

Note que :link pode não ser visível se :visited for definido e o link já tiver sido visitado.

Pseudo-classes :focus e :target

• :focus: Elemento que recebeu foco (geralmente campos de formulário).
• :target: Elemento que é o alvo de um link de fragmento (#).

<style>
   input:focus { outline: 1px solid red; border: 1px solid red; }

   #primeiro-paragrafo:target { color: red; }
   #segundo-paragrafo:target { text-decoration: underline; }
</style>

<input type="text"><br>

<a href="#primeiro-paragrafo">Ir para Primeiro Parágrafo</a><br>
<a href="#segundo-paragrafo">Ir para Segundo Parágrafo</a><br>

<div id="primeiro-paragrafo">Conteúdo do primeiro parágrafo.</div>
<div id="segundo-paragrafo">Conteúdo do segundo parágrafo.</div>

Pseudo-classes Estruturais

Selecionam elementos com base em sua posição na estrutura do documento.

:first-child e :last-child

:first-child seleciona o primeiro elemento entre seus irmãos. :last-child seleciona o último.

Observação: Para que funcionem corretamente, especialmente :last-child, o elemento deve ser o último de seus irmãos diretos. Agrupar elementos dentro de um container pode ajudar.

:nth-child(n)

Seleciona elementos com base em sua posição (n), podendo usar odd (ímpar) ou even (par).

<style>
   .caixa:first-child { background-color: red; }
   .caixa:last-child { background-color: blue; }

   table tr:nth-child(odd) { background-color: darkgoldenrod; }
   table tr:nth-child(even) { background-color: darkmagenta; }
   table tr:nth-child(1) { background-color: red; color: white; } /* Sobrescreve o odd para a primeira linha */
</style>

<div>
   <div class="caixa"></div>
   <div class="caixa"></div>
   <div class="caixa"></div>
</div>

<table>
   <tr><td>Célula 1</td><td>Célula 2</td><td>Célula 3</td></tr>
   <tr><td>Célula 1</td><td>Célula 2</td><td>Célula 3</td></tr>
   <tr><td>Célula 1</td><td>Célula 2</td><td>Célula 3</td></tr>
   <tr><td>Célula 1</td><td>Célula 2</td><td>Célula 3</td></tr>
   <tr><td>Célula 1</td><td>Célula 2</td><td>Célula 3</td></tr>
</table>

Pseudo-elementos

Pseudo-elementos criam "elementos" fictícios para estilizar partes específicas do conteúdo.

::first-letter

Estiliza a primeira letra de um bloco de texto.

::first-line

Estiliza a primeira linha de um bloco de texto.

::before e ::after

Permitem inserir conteúdo gerado antes ou depois do conteúdo de um elemento.

<style>
   .primeira-letra::first-letter { font-size: 2em; color: red; }

   .primeira-linha::first-line { font-style: italic; color: rgba(100, 0, 25, 0.5); }

   .antes::before { content: 'Prefixo: '; color: sandybrown; }
   .depois::after { content: ' Sufixo'; color: skyblue; }
</style>

<div class="primeira-letra">Teste de pseudo-elemento ::first-letter</div>
<div class="primeira-linha">
   <p>Primeira linha de teste para ::first-line. Esta é a primeira linha e será estilizada.</p>
   <p>Segunda linha de teste.</p>
</div>

<div class="antes">Conteúdo com before</div>
<div class="depois">Conteúdo com after</div>