Uso do last-child no CSS

29 de agosto de 2020 4 respostas

kimi 29 de agosto de 2020

Olá gente, eu estava testando o uso de pseudo classes como o last-child e tem uma coisa que está me deixando em dúvida. Vou mostrar o código para vocês:

Código CSS:

Código no body:

Resultado:

O last-child que eu saiba seleciona o último elemento filho independente do tipo dele. Só que nesse código a cor yellow, que foi aplicada usando o last-child, tá atingindo o primeiro elemento, o quarto e o último. Não era só pra pegar o último elemento? Não sei se eu fiz alguma coisa errada, procurei e não achei nada.

4 Respostas

TerraSkilll 29 de ago. de 2020 1 like

Pra ter certeza, inspecione os elementos (nas ferramentas de desenvolvedor, pressionando F12) e veja qual estilo está aplicado nos elementos em amarelo. Eu desconfio que a cor amarela está sendo aplicada em todos os elementos (não só no last-child), e os demais estão obedecendo as outras regras.

Rodando um exemplo no JSFiddle (veja aqui), obtive um resultado diferente do seu, então desconfio que algo a mais está sendo aplicado no seu css.

PS: sempre que for postar código (ou html e css), não poste fotos dele. Copie o código para cá e formate usando o botão </>. Isso facilita pra quem quiser executá-lo.

Abraço.

kimi 29 de ago. de 2020

Pois é, eu também desconfiei primeiramente que podia ter algo a mais no código que fizesse isso, mas no CSS realmente não tem mais nada.

Eu inspecionei os elementos e realmente, em todos eles diz que estão herdando o color: yellow; da ul, mas eu não entendo porque elementos que não são o último estão herdando isso também.

Sobre não postar foto do código okay obrigada por avisar, vou postar aqui então todo o código que eu tenho no meu documento.

<!doctype html>
<html>

	<head>
		<title>Título do meu documento</title>
		<meta charset="utf-8"/>

		<style>

			* {
				margin: 0;
				padding: 0;
			}

			html, body {
				height: 100%;
			}

			ul {
				list-style-position: inside;
			}

			ul li:nth-of-type(1) { /* vai selecionar o primeiro elemento da ul que seja do tipo li */
				color: red;
			}

			ul li:nth-child(3) { /* vai selecionar o terceiro elemento da ul sem precisar ser de algum tipo */
				color: blue;
			}

			ul li:last-of-type {
				color: orange;
			}

			ul:last-child {
				color: yellow;
			}

		</style>
	</head>

	<body>

		<ul>
			<span>Oi</span>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
			<li>Four</li>
			<span>Oi</span>
		</ul>
		
	</body>

</html>

wldomiciano 29 de ago. de 2020

Então faz sentido. Estes elementos estão herdando a cor de <ul> porque vc colocou assim:

ul:last-child {

Ou seja, vc está dizendo que “deixe amarelo todo <ul> que for o último filho” que é o caso do seu código.

Acredito que o que vc queria escrever era isso:

ul li:last-child {

Porque nas outras regras vc aplicou as pseudo-classes ao <li>, só neste último vc aplicou ao <ul>.

Elifaz 29 de ago. de 2020

So um conselho quanto a sua logica em si, <ul> - unordered lists, nao sao feitos para terem children que nao seja <li> -list-item's caso voce esteja aprendendo as funcionalidades no CSS para mirar ao nth-child, last-child.... seria ideal que voce mantesse a regra do elemento, especialmente por ADA Compliance para pessoas com incapacidades e tambem para evitar bugs inexplicaveis como que voce esta vendo agora.

Agora quanto a resposta:
last-child sempre ira focar apenas ultimo elemento de um grupo de irmaos (siblings), entao a nao ser que voce tenha outro ul nesse grupo, a logica: ul:last-child nao funcionara como voce espera, como wldomiciano mencionou, o certo seria li:last-child para voce ter o amarelo no ultimo li elemento, e caso voce queira incorporar uma span dentro de uma ul, certifique-se de criar um wrapper li em volta da span como por exemplo:

<ul>
  <li>
    <span>I can put whatever I want in here</span>
  </li> 
  <li>
    <ul>
      <li>And even make something crazier, like this :O</li>
    </ul>
  </li>
</ul>

Ou seja, mesmo que o seu codigo estando incorreto na forma da logica, o CSS ainda esta tentando aplicar as regras para voce, que no final acaba piorando ainda mais a situacao.

Veja essa documentacao para entender as limitacoes dos elementos que voce queira testar/utilizar.

Criado 29 de agosto de 2020

Ultima resposta 29 de ago. de 2020

Respostas 4

Participantes 4

4 Respostas

Topicos relacionados