CSS - 5. Seletores

Como selecionar os itens com CSS?

Vamos supor o seguinte HTML:

<div id="elemento1">Texto</div>
<div class="elemento">Texto 2</div>
<div class="elemento">
     <div><p>Texto 3</p></div>
</div>

Então vamos aos casos:

id: Você pode selecionar todo elemento id de um HTML com CSS usando jogo da velha: #.

Neste caso, o elemento1 pode ser referenciado desta forma:

#elemento1 {  }

Basta incluir as propriedades desejadas para o elemento que seguirá a sua formatação.
Sempre abra e fecha chaves para incluir os parâmetros de CSS para o determinado elemento.

Exemplo:

#elemento1 {
   font-family: 'Arial'
}

Nota: Em um único documento HTML, não pode repetir um valor para um ID, ou então, não irá conseguir selecionar itens únicos, que é o propósito para o qual foi desenvolvido. Ou seja, criar vários elementos contendo "elemento1" por exemplo, é um erro.

class: Para selecionar um elemento no documento, precisará apenas colocar um ponto ".".

.elemento { }

Aqui temos um detalhe, deixamos o elemento repetido no exemplo do HTML apenas para também explicar que não há problemas em repetir o valor para o elemento class, e que foi desenvolvido para isto mesmo. Entretanto, ao utilizar desta forma, todos os elementos são alterados ao mesmo tempo. Neste caso, para definir a fonte, basta informar qual fonte deverá assumir assim como no exemplo acima.

p: Para selecionar um parágrafo, basta colocar o próprio elemento no CSS.

p { font-family: 'Arial' }

Isto já fará com que todo elemento dentro da tag <p> já seja tratado com a fonte Arial.

Você pode referenciar também elementos de outras formas:

.elemento p {  }

Aqui irá formatar apenas o parágrafo que está dentro da classe elemento.

Pode também utilizar * para que o atributo seja replicado para todos os filhos, ou seja:

.elemento { color: red }

Isto aqui irá colorir apenas o "Texto 2" do exemplo do HTML, e não o Texto 3.

.elemento * { color: red }

Isto aqui irá colorir apenas o "Texto 3" do exemplo do HTML, e não o Texto 2, mas se houver qualquer outro elemento dentro de elemento, ele será colorido com vermelho, pois com o asterisco será replicado para todos os filhos.