Publicado em 17 de jul.

[Resolvido] Last-Child funciona mas First-Child não funciona

Olá pessoal. Eu aqui mais uma vez atrapalhando a vida de vocês http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Bom eu realmente tentei e tentei resolver o problema mais não consegui: Aqui vai a URL:http://protegeredesetelas.com.br/ e aqui vai o problema:

Reparem no primeiro e no ultimo paragrafo. Meu objetivo seria somente aplicar um estilo diferenciado para o primeiro paragrafo. Foi o que tentei fazer usando Fist-Child porém não funcionou. Ao usar o last-child ele funciona. Comparem o ultimo e o primeiro paragrafo. Na folha de estilho CSS está declarado ambos mas só um funciona, alguem sabe porque?

O CSS fica assim:

div#conteudo p:last-child
{

padding:20px 0 10px 0;
text-indent:25px;
color:gray;
}

div#conteudo p:first-child
{

padding:20px 0 10px 0;
text-indent:25px;
color:gray;
}

EU poderia ter usado uma classe especifica somente para o primeiro paragráfo, mas penso que usar first child é a forma mais correta.

Se alguém tiver uma sugestão eu agradeço

Discussão (7)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Thiago Retondar· 17 de jul.

div#conteudo p:last-child
{

padding:20px 0 10px 0;
text-indent:25px;
color:gray;
}

div#conteudo p:first-child
{

padding:20px 0 10px 0;
text-indent:25px;
color:gray;
}

Ué, mas os dois possuem as mesmas declarações. :lol:

Seria interessante sempre colocar na ordem lógica. O first-child primeiro e depois o last-child.

O seu erro está acontecendo no Internet Explorer? Pois, se não me engano, ele só começar à suportar isso a partir da versão sete, se não for a oito. ;)

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

pslucasps· 17 de jul.

@Thiago Retondar: Primeiramente obrigado pela ajuda. Em relação ao problema ele estava ocorrendo no FF mesmo (aliais em todos os navegadores). Eu descobri o problema. Tenho no site uma div chamada #conteudo. Após essa div tenho o titulo em h1 e após isso os paragráfos com os textos. Sendo assim a estrutura do site na parte do conteudo está mais ou menos assim:

<div id='conteudo'>
<h1>Titulo</h1>
<p>Texto1</p>
<p>Texto2</p>
<p>Texto3</p>
</div>

Na declaração CSS assim

div#conteudo p:first-child
{
...
}

O que acontece é que após eu tirar o h1 e deixar o p como primeiro elemento da div#conteudo ele funciona, mas colocando o h1 ou qualquer outro elemento acima do p ele não funciona. Entretanto o last-child funcionava pois não havia outro elemento na div#conteudo abaixo dele.

Parece que o navegador interpreta dessa forma: Adicione a marcação especial para o primeiro paragrafo caso ele seje o primeiro elemento da div#conteudo. Entretanto meu objetivo é adicionar a marcação especial ao primeiro paragráfo mesmo não sendo o primeiro elemento da div#conteudo. Será que tem como fazer isso?

Ah e caso caso precisarem eu boto no site a página sem o h1 para verem como fica.

Caso não fui claro por favor me avise. Agradeço a colaboração.

Thiago Retondar· 17 de jul.

Nunca fui de usar essa pseudo-classe, logo nunca passei por isso. :P

Mas pelo que andei pesquisando dessa maneira não funciona mesmo, veja:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.clem.ufba.br/tuts/css/c14.htm

Vou continuar buscando informações, mas não garanto nada. ;)

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

------

Edit

------

Percebi que se você fizer assim div#conteudo p:first-child ele vai pegar o primeiro parágrafo e formata-lo apenas se ele for o primeiro elemento. Caso contrário, não. O mesmo se aplica ao :last-child. Veja:

<div id="conteudo">
	<h1>Título</h1>
<p>Texto1</p>
<p>Texto2</p>
<p>Texto3</p>
	<h1>Título</h1>
</div>

Assim, você não vai conseguir aplicar no último p.

pslucasps· 17 de jul.

@Thiago Retondar: É realmente essa questão parece ser muito complicada vou ler o site indicado. Obrigado pela força. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

<div id="conteudo">
	<h1>Título</h1>
<p>Texto1</p>
<p>Texto2</p>
<p>Texto3</p>
	<h1>Título</h1>
</div>

Assim, você não vai conseguir aplicar no último p.

Sim essa parte já havia percebido. Bom, agradeço mais uma vez a sua ajuda.

>
Entretanto o last-child funcionava pois não havia outro elemento na div#conteudo abaixo dele.

Henrique Barcelos· 17 de jul.

Last-Child não funciona no IE7- ou 6-, não lembro... é bom você saber...

First-Child funciona no IE7+ e nos navegadores padrão...

As pessoas confundem um pouco esses conceitos de First e Last-Child...

Não é o ÚLITMO(PRIMEIRO) ELEMENTO do tipo especificado, é o elemento especificado que seja O ÚLTIMO (PRIMEIRO) FILHO de outro elemento...

Ex.:

 <div id="main">
 <p>Texto 1 aqui</p>
 <p>Texto 2 aqui </p>
 <p>Texto 3 aqui </p>
 <div class='clear'></div>
 </div>

 p {
 float: left;
 margin: 10px;
 }

 p:first-child {/*Casa com o elemento esperado*/
 margin-left: 0;
 }

 p:last-child {/*Não casa com o elemento esperado*/
 margin-right: 0;
 }

Thiago Retondar· 17 de jul.

É, dei uma pesquisada em sites como Maujor e Tableless e vi que é isso aí que o Rick disse. ;)

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

pslucasps· 17 de jul.

Sim entendi perfeitamente. Obrigado @Rick.hjpbarcelos e @Thiago Retondar. É graças a pessoas como vocês que o pessoal cria vontade de aprender corretamente. Parabéns. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif