Cássio Fabre
E ai pessoal, tudo certo? Semana passada não houveram posts, se não estou enganado. Mas não foi porque não quis postar, mas tive um problema na hora de upar o vídeo da Parte 4 da série Aprenda HTML e CSS na Prática.
Quando falamos em first-child no CSS, estamos nos referindo exatamente ao que o termo sugere: o primeiro filho ou, no caso, a tag filha.
Bom, a primeira coisa que temos que ter em mente é que essas pseudo-classes se aplicam a qualquer coisa dentro do código HTML. Elas vão formatar a tag que você configurar e não aleatoriamente. O que isso significa? Que você terá que dizer ao CSS qual tag ele vai formatar. Vamos a um exemplo para melhor entendimento. Suponhamos o seguinte código, dentro da tag body:
<div id="teste">
<p>TESTE 1</p>
<p>TESTE 2</p>
<p>TESTE 3</p>
</div>
Agora vamos colocar o seguinte CSS:
#teste p:first-child{
background: #159357;
}
Muito fácil de entender: temos um HTML simples e no CSS estamos dizendo para o navegador o seguinte:Olha cara, você vai pegar a primeira tag <p> que estiver dentro da <div id="teste"> e vai colocar um plano de fundo verde.No caso, a primeira tag <p> é a que tem escrito TESTE 1 dentro. E assim funciona também com a last-child. A única coisa que vamos mudar é no CSS de first-chil para last-child. Faça isso e veja a diferença. Legal, né?!
Uma coisa muito importante a se observar é em qual tag você vai colocar a pseudo-class. No exemplo acima, estamos tratando a tag <p> que é a tag de Parágrafo. Mas se por acaso você tivesse colocado a pseudo-class na #teste o efeito seria diferente, compreendendo toda a extensão do container. Vamos a um exemplo deste tipo, escreva o seguinte HTML dentro do body.
<div class="teste">
<p>Teste 1</p>
<p>Teste 2</p>
<p>Teste 3</p>
</div>
<div class="teste">
<p>Teste 4</p>
<p>Teste 5</p>
<p>Teste 6</p>
</div>
Agora vamos colocar o seguinte CSS:.teste:first-child{
background: #159354;
}
Dessa vez dizemos ao nosso navegador:Agora, meu camarada, você vai pegar a primeira <div class="teste"> que tiver dentro do HTML pintar toda ela de verde.Faça o teste!
Isso funciona para qualquer coisa. Mais um exemplo para você entender melhor: suponhamos que queiramos pintar a primeira div que estiver no corpo do nosso código, independendo da id ou class dela, como vamos fazer? Vamos continuar com o mesmo HTML do exemplo acima, e apenas modificar o CSS para este:
body div:first-child{
background: #159354;
}
Troque novamente o first pelo last-child para ver a diferença. Se quiser que esta formatação se encaixe em outra tag como ul, li, p, tr, td ou qualquer outra basta substituir o div pela tag de sua preferência.
Ok, sabemos configurar a primeira tag filha e também a última, mas e as intermediárias? A segunda, terceira e outras que eventualmente possam ter? Bom, não existe uma pseudo-class second-child ou third-child. Então, como faz? Para esses casos existe duas formas que podemos utilizar para que funcione corretamente. Vamos pegar o HTML abaixo como exemplo:
<div class="teste">
<p>Teste 1</p>
<p>Teste 2</p>
<p>Teste 3</p>
<p>Teste 4</p>
</div>
Agora vamos ao CSS:.teste p:nth-child(2){
background: #111;
color: #fff;
}
A pseudo-class nth-child trata de todas os "filhos", intermediários ou não, que no caso é o segundo identificado por (2). Basta você substituir o número pelo número de ordem do elemento que você quer formatar. Por exemplo, se quisermos trocar a cor do texto do <p>TESTE 3</p> basta fazermos isso:.teste p:nth-child(3){
color: #888;
}
Como dissemos "intermediários ou não", isso significa que você pode utilizar esta forma para tratar da first-child também, substituindo o número entre parênteses por (1).
Em relação ao last-child, apesar de funcionar, não é aconselhável utilizar esta forma pois você teria que trocar o número manualmente no caso de colocar mais um elemento. Por exemplo, se você colocasse mais um <p>TESTE 5</p> dentro da <div class="teste">, e já tivesse uma formatação para o last-child que, no caso, é o "TESTE 4" e passou a ser o TESTE 5, utilizando a pseudo-class nth-child(4), teria que substituir o (4) por (5), o que não é muito interessante, não é mesmo?
A outra forma de fazer isso, é "somando" as tags da seguinte forma:
.teste p:first-child + p + p{
background: #111;
color: #fff;
}
Neste caso, o navegador vai aplicar as configurações à tag <p> de número 3. Mas como assim? O navegador vai começar a somar a partir da pseudo-class que estiver antes do primeiro mais (+). No caso, a pseudo-class é a de número 1 (first-child) e são somados mais dois p, dando um total de "3p", ou seja, a "third-child". Isso é matemática básica. Claro que você pode somar a partir de outros números, como a partir da segunda tag, por exemplo:.teste p:nth-child(2) + p + p{
background: #111;
color: #fff;
}
E por fim, a questão: Por que utilizar esse monte de configuração, e não apenas colocar class ou id direto nas tags para fazer os efeitos?
Além de deixar seu código mais limpo e profissional, essas configurações fazem com que fique tudo automático, ou seja, no caso de você precisar adicionar mais tags, não precisará ficar se preocupando em criar mais código CSS e nem reconfigurar o que já foi feito. De longe, vale muito a pena.
Mas e quanto à aplicação, posso usar em qualquer lugar e com qualquer tag? Como disse no começo do post: SIM! Particularmente eu uso muito quando vou criar menus. Vamos pensar em um menu simples, como o abaixo:
Eu usei os atributos first-child e last-child para trocar o background do primeiro e ultimo link do menu de para cores diferentes. Muito interessante isso. Abaixo o código que usei para fazer este menu. Primeiro o HTML:
<div class="menu-post"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Sobre</a></li> <li><a href="#">Contato</a></li> </ul> </div>Agora o CSS:
.menu-post{
width: 95%;
height: 40px;
background: #ddd;
margin: 10px auto;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
padding-left: none;
font-family: calibri;
text-transform: uppercase;
}
.menu-post ul li{
display: inline;
}
.menu-post ul li a{
float: left;
padding: 10.5px;
border-right: 2px groove #fff;
text-decoration: none;
color: #444;
margin-left: -1px;
}
.menu-post ul li a:hover{
background: #efefef;
}
.menu-post ul li:first-child a{
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.menu-post ul li:first-child a:hover{
background: #F90;
}
.menu-post ul li:last-child a{
border: none;
}
.menu-post ul li:last-child a:hover{
background: #f0331c;
color: #fff;
}
Mas se você pensa que é só isso, você está infinitamente enganado. Existem muito mais configurações, algumas até mesmo que os navegadores atuais nem suportam ainda. Então, espero que tenham gostado e espero voltar em breve com o vídeo. Até mais.
0 comentários:
Postar um comentário