Solucionado
Boa tarde, não poderíamos fazer dessa maneira:
.citacoes-bio{
float: right;
margin: 1rem 2rem;
box-sizing: border-box;
padding: .5rem;
width: 30ch;
background-color: #D9E5E3;
border: .5rem solid #C2CCCA;
}
.citacoes-bio:nth-of-type(2n){
float: left;
}Deixar a classe .citacoes-bio com o float:right e depois pegar somente os pares com .citacoes-bio:nth-of-type(2n)?
Aqui funcionou certinho! :D
É um detalhe apenas, mas a sua solução tem um problema que não gosto: a regra do left está sobrescrevendo a regra do right. Em geral, evito isso.
Claro aqui o codigo é pequeno, mas em projetos maiores sobrescrita de propriedades é fonte de muita confusão. O resultado final é o mesmo sim, mas a legibilidade do codigo é prejudicada.
Imagine que alguem esta lendo seu CSS e ve .citacoes-bio{float: right;}. Isso está dizendo que toda citacao-bio deve flutuar a direita. Mas isso não é verdade. Logo ele percebe que nao, algumas flutuam a esquerda. Onde estaria esse codigo se o CSS for grande?
O ponto é que a boa pratica é usar o seletor mais especifico possivel, afetar o menor numero de elementos possiveis. Entao eu preferiria um codigo assim:
.citacoes-bio{
margin: 1rem 2rem;
box-sizing: border-box;
padding: .5rem;
width: 30ch;
background-color: #D9E5E3;
border: .5rem solid #C2CCCA;
}
.citacoes-bio:nth-of-type(2n){
float: left;
}
.citacoes-bio:nth-of-type(2n+1){
float: right;
}Na minha opiniao, ele reflete melhor a ideia de que elementos pares flutuam a esquerda, elementos impares a direita.
Entendi. Quanto mais especificado for o CSS melhor então. Valeu Sergio, obrigado pela resposta.