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.
Mas se tudo der certo, hoje ainda conseguirei colocar o vídeo aqui pra vocês. Mas por agora nosso assunto é apenas o CSS. Hoje aprenderemos a trabalhar com as pseudo-classes
first-child,
last-child e as intermediárias ("
second-child", "
third-child", ...), que fogem a este padrão. Bom, abra seu editor de código predileto e mãos à obra.
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.
Cássio Fabre
