Seletores em CSS sem doer (muito)

Fala aí, honorável visitante! Turu bom? Como o título já diz, hoje o post vai ser sobre seletores em CSS. Eu estou "reestudando" esse negócio, porque é parte de um cursinho de Desenvolvimento Web que peguei esse ano para fazer. Tem muita coisa que pra mim está sendo mais revisão, sabe? Mas acho bom, já que existem certos conteúdos que não fazem parte do meu dia a dia como programador.

Enfim, aqui eu pretendo mostrar exemplos de seletores desde os mais simples, como selecionar um elemento através do id e da classe, até aqueles mais enrolados, como seleção de elementos filhos e irmãos. Então, bora lá!

Seletor universal e de elemento

Começando pelo seletor universal, esse cara serve para criarmos uma personalização padrão para todos os elementos HTML da página. Considero uma boa maneira de definir, por exemplo, quais serão as características de fontes padrão usadas: tamanho, estilo, espaçamento entre caracteres etc. Segue abaixo uma forma de uso:

* {
   font-size: 1.5em;
   color: yellow;
}

Outra possibilidade de seletor bem básico é a seleção de elemento. Aqui o objetivo está em criarmos uma personalização que vai se estender a todos os elementos de um determinado tipo. Por exemplo, se você pretende deixar todos os títulos <h2> com a cor de fonte azul e em itálico, pode fazer assim:

h2 {
   color: blue;
   font-style: italic;
}

Esses são os mais simples. Agora vamos passar para outros seletores que também são bastantes comuns.

Seletor de classe e id

Os seletores de classe e de id são semelhantes, permitindo que a gente modifique o estilo dos elementos a partir ou de sua classe ou de seu id. Em suma, você cria a classe ou id usando uma palavra que faça sentido para o propósito desejado, e em seguida usa em uma tag HTML. Segue abaixo dois exemplos, uma classe e um id:

/* A classe é indicada por um ponto */
.texto-azul {
   color: blue;
}

/* Já o id é indicado por # */
#texto-vermelho {
   color: red;
}

Dessa forma, podemos usar essa classe ou esse id em qualquer tag HTML, como nessas abaixo:

<p class="texto-azul">Este parágrafo vai sair azul.</p>
<p id="texto-vermelho">Enquanto que este vai ficar vermelho.</p>

Sendo assim, a primeira tag terá o texto de cor azul e a segunda terá o texto vermelho. Lembrando que a diferença entre uma classe e um id é que a classe pode afetar vários elementos, enquanto que o id só é reconhecido um por página HTML.

Seletor de filho e de descendente

Agora a coisa fica mais interessante. No caso do seletor de filho, o intuito é selecionar os filhos diretos de um elemento. Por exemplo, supomos que você tenha uma <div> contendo um título e dois parágrafos. Para manipular a cor de texto apenas dos parágrafos sem alterar a cor do título, você pode fazer da seguinte maneira:

<style>
    div > p {
        color: blue;
    }
</style>

<div>
    <h3>Título</h3>
    <p>Parágrafo 1</p>
    <p>Parágrafo 2</p>
    <strong>
        <p>Parágrafo 3</p>
    </strong>
</div>

O sinal de maior na linha do seletor (div > p) define que a cor azul será aplicada em todas as tags <p> que sejam filhas diretas de uma <div>, portanto apenas os parágrafos 1 e 2 do exemplo serão pintados enquanto que o parágrafo 3 permanecerá preto, que é a cor default de texto.

Por outro lado também temos o seletor de descendente, que vai afetar não apenas os filhos diretos, mas qualquer outros elementos que estejam dentro do escopo do pai. A título de exemplo, observe o HTML abaixo (é o mesmo código anterior, com apenas uma alteração na segunda linha):

<style>
    div p {
        color: blue;
    }
</style>

<div>
    <h3>Título</h3>
    <p>Parágrafo 1</p>
    <p>Parágrafo 2</p>
    <strong>
        <p>Parágrafo 3</p>
    </strong>
</div>

Criando o seletor da forma acima (div p), a cor azul será aplicada em todas as tags <p> dentro do escopo da <div> sem exceção. Sendo assim, todos os três parágrafos serão pintados.

Seletor de irmão adjacente

O próximo tipo de seletor que vou comentar aqui é conhecido como seletor de irmão adjacente, e como o próprio nome já diz, ele serve afeta apenas os elementos irmãos que estiverem "ao lado" do selecionado. Veja o código abaixo:

<style>
    h3 + p {
        color: blue;
    }
</style>

<div>
    <h3>Título</h3>
    <p>Parágrafo 1</p>
    <p>Parágrafo 2</p>
    <p>Parágrafo 3</p>
    <div>Parágrafo 4</div>
</div>

Note que esse seletor é representado pelo sinal de soma (h3 + p). Sendo assim, no exemplo acima o único elemento a ser pintado de azul será o parágrafo 1, pois só ele se encaixa na seleção criada: pra ficar azul tem que ser tag <p> e estar exatamente ao lado da tag <h3>. Portanto, as outras tags <p> não terão a cor alterada. 

Seletor de irmão geral

E, por fim, temos o seletor de irmão geral, ou seja, um seletor capaz de afetar todos os irmãos do elemento selecionado. Esse é o último que vou apresentar no post, juro! Então observe o exemplo abaixo (que também é o mesmo do anterior, mas com uma pequena diferença):

<style>
    h3 ~ p {
        color: blue;
    }
</style>

<div>
    <h3>Título</h3>
    <p>Parágrafo 1</p>
    <p>Parágrafo 2</p>
    <p>Parágrafo 3</p>
    <div>Parágrafo 4</div>
</div>

Como você deve ter percebido, a única diferença entre esse código e o do exemplo anterior foi a segunda linha (h3 ~ p). O til representa a tal da seleção de irmão geral. Nesse exemplo, a cor azul será aplicada em todas as tags <p> que forem irmãs de <h3>. Sendo assim, ficarão coloridos os parágrafos 1, 2 e 3.

E enfim chegamos ao final do post! Agradeço muito a todos que chegaram até aqui, pois esse texto deu um trabalhinho pra escrever.😅 Espero que as dicas apresentadas acima sejam uteis de alguma forma. Até a próxima!