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:
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.
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.
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>
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.
