O que significa os sinais de >, :: , +, e & no css?

Olá pessoal, hoje após fazer um teste do Linkedin de CSS tive a ideia de postar um artigo bem bacana sobre programação de Estilos com CSS, muitas pessoas devem ter dúvidas básicas com CSS por exemplo, o que significa aqueles benditos sinais de > ou :: ou + ou & ?

Cada um tem uma função, e acredite, esses sinais mudam a forma como você programa em CSS!

O que significa os sinais de >, :: , +, e & no css?

Sinal de maior >: significa filho-direto do elemento. Seleciona todos os filhos-diretos do elemento.

Dois pontos ::: significa pseudo-elemento (um elemento-filho).

Sinal de +: seleciona o elemento imediatamente após.

Sinal &: este sinal não existe no CSS. Ele é usado no Sass, uma linguagem para compilar códigos CSS (Há!)

Exemplos de uso dos Sinais de >, :: e +

Exemplo: div > span

<div>
  <span> <!-- filho direto da div -->
     DvD
     <p>DvD</p> <!-- não é filho direto da div -->
  </span>
</div>

Exemplo: div::first-letter

Seleciona a primeira letra dentro da div (no caso abaixo, o “d”).

<div>
   <span>
      dvd
   </span>
</div>

Exemplo: div + p

<div>
   dvd
</div>
<p>dvd</p> <!-- este é selecionado, pois está após a div -->
<p>dvd</p> <!-- este não é selecionado -->

Eu espero de coração que essas dicas práticas te ajudem a evoluir como Programador, e te faça arriscar mais e enxergar melhor essa “Matrix” que é o Código CSS dentro de um site!

Fica o meu profundo agradecimento a você por ler esse artigo, e vou disponibilizar abaixo o link de fonte onde tirei esse conteúdo incrível para compartilhar com você!

https://pt.stackoverflow.com/questions/252589/o-que-significa-sinal-de-e-em-css