Dicas CSS: Seletores CSS - Avant Solucoes

Dicas CSS: Seletores CSS

Dicas CSS: Seletores CSS

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

 

 

Volte para o blog