Selecionando elementos Entenda como formatar os elementos do CSS

Seletores CSS ajudam a especificar melhor o elemento que deve ser afetado.

Vejamos alguns seletores:

Elemento Filho (A > B)

Para selecionar um elemento (B) que tenha um elemento pai específico (A), deve-se utilizar o ">".

Ex.:

nav.menu-principal > ul {
  padding: 0;
}
// neste caso, somente o elemento ul, que tem como pai um elemento nav com classe "menu-principal", receberá a alteração de preenchimento

Elemento Irmão (A + B)

Quando um elemento (B) está ao lado de outro específico (A).

Ex.:

label + input {
  border: 1px solid #333;
}
// todos os inputs que estiverem ao lado de um label receberão borda cinza

Não este elemento (A:not(b))

Exclui determinado elemento (A) de acordo com a especificação (b).

div:not(.principal) {
  border: 1px solid #F00;
}
// todas as divs que não tenham a classe "principal" receberão borda vermelha

Primeiro Filho (A:first-child)

Seleciona o primeiro elemento que aparecer, de acordo com o elemento definido (A).

li:first-child {
  background-color: #0F0;
}
// O primeiro li terá fundo verde

Enésimo Elemento (A:nth-child(b))

Seleciona o elemento definido (A) de acordo com a posição informada (b).

li:nth-child(7) {
  background-color: #666;
}
// O sétimo li terá fundo cinza

Esta página está em construção. Volte em breve ou ajude