Todos desenvolvedores Web conhecem o CSS, ele é quem dita como serão exibidos os elementos do código html na página Web. E para escrever um código complexo de CSS de forma que o script fique bem identado e de fácil localização de elementos usamos algumas regras básicas como deixar cada comando em uma linha:
#ConteudoBlog{
Width:100px;
Height: 150px;
border: 1px solid #f45;
Color: #C3C3C3;
}
E quando precisamos selecionar determinado elemento do código html? Existem seletores no CSS que ajudam a especificar melhor o elemento que deve ser afetado.
Vejamos alguns seletores:
Elemento Filho (A>B)
Selecionar um elemento (B) que tenha um elemento pai específico (A), deve-se utilizar o sinal de maior (>)
Exemplo:
nav.menu-site > li {
padding:0;
background-color:#f1f1f1;
}
No caso acima, somente a linha (li) que tiver como pai um elemento nav com classe “menu-site”, receberá as modificações.
Elemento Irmão (A+B)
Quando um elemento (B) está ao lado de outro específico (A)
Exemplo:
label + input {
Border: 2px solid #1681C6;
}
Neste caso, todos os inputs que estiverem ao lado de um label receberão uma borda azul.
Este elemento não (A:not(b))
Exclui um elemento determinado (A) de acordo com uma especificação (b)
Exemplo:
div:not(.conteudo) {
border: 2px solid #1681C6;
}
Neste caso, todas as divs que não tenham a classe “conteudo” receberão a modificação.
Primeiro Filho (A:first-child)
Seleciona o primeiro elemento derivado do elemento definido (A)
Exemplo:
li:first-child{
background-color:#1681c6;
}
Neste caso, a primeira linha (li) terá o fundo azul.
Posicionamento definido (A:nth-child(b))
Seleciona o elemento definido (A) de acordo com a posição indicada (b)
Exemplo:
li:nth-child(5){
background-color:#1681c6;
}
Neste caso, a quinta linha terá o fundo azul.
Para mais dicas como essa, fiquem ligados no nosso blog ou na nossa página no Facebook