Olá professor luan, e professora Bia, tenho uma dúvida referente a questão da order. Gostaria de saber, se com o :nth-child() {}, existe alguma maneira de encurtar o código, escrever a ordem de uma maneira onde não precise repetir tanto o código do menu__item?
Desde já agradeço :)
Olá Gustavo, tudo bem?
Infelizmente como estamos tratando de um flex item, é necessário chamarmos um a um para especificar o seu order.
Uma dica para sintetizar essa sintaxe que se repete, utilizando menos quebras de linhas e diminuindo o tamanho do código, seria fazendo em linha, ao invés de bloco.
Como o código está:
.menu__item:nth-child(1) {
order: 1;
}
.menu__item:nth-child(2) {
order: 3;
}
.menu__item:nth-child(3) {
order: 4;
}
.menu__item:nth-child(4) {
order: 5;
}
.menu__item:nth-child(5) {
order: 2;
}O código ficará assim:
.menu__item:nth-child(1) { order: 1; }
.menu__item:nth-child(2) { order: 3; }
.menu__item:nth-child(3) { order: 4; }
.menu__item:nth-child(4) { order: 5; }
.menu__item:nth-child(5) { order: 2; }Dessa forma ficará um pouco mais sintetizado, porém a repetição é necessária.
Espero ter ajudado em caso de dúvidas fique a vontade para perguntar. Abraços!