Olá, fiz de uma forma diferente do exercício e gostaria de saber se também está correto.
.trabalhos li:nth-child(2){
order: 1 2 1; // aqui eu inseri o valor para as 3 colunas classificando em 1 2 1 da forma que o exercício pediu
transform: scale(1.2);
border: 5px solid black;
}É correto?
Oi, Andrey, tudo bem?
Como você usou o pseudo-elemento nth-child(2) você está dizendo que os elementos da classe trabalhos que está em li você vai pegar o filho de número 2 e aplicar a estilização, então, pode ficar confuso colocar três valores pro order se, no caso, você seleciono somente um elemento pelo seletor nth-child. Faz sentido?
Faz sentido..
Nesse caso eu teria que aplicar o order para cada elemento nth-child separadamente, correto?
Mas, poderia também fazer esse valor order :1 2 3 no pai e depois classificar somente o 2 para o scale maior?
Isso, veja nesse exemplo que fiz:
<body>
<div id="main">
<div style="background-color:orange;" class="square"></div>
<div style="background-color:blue;" class="square"></div>
<div style="background-color:greenyellow;" class="square"></div>
<div style="background-color:palevioletred;" class="square"></div>
</div>
<style>
#main > .square:nth-child(4){
order: 1;
} #main > .square:nth-child(3){
order: 2;
}
#main > .square:nth-child(2){
order: 3;
}
#main > .square:nth-child(1){
order: 4;
}
/*#main > .square{
order: 4,1,2,3;
}
#main {
width: 400px;
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div {
width: 70px;
height: 70px;
}
</style>
</body>
</html>Teste as posições da ordem, depois comente essa estilização, e teste só com essa:
/*#main > .square{
order: 4,1,2,3;
}*/Você verá que não tem o mesmo resultado.
Espero ter te ajudado!