Como aplicar um CSS distinto em elementos pares e ímpares?

Front-end
, ,
#1

Sudações pessoal,
Estou tentando criar um CSS “dinâmico”, para aplicar em um bloco de código que deverá exibir uma pequena lista que possui uma imagem e uma descrição.

As classes para exibir no formato que eu quero já estão prontas, mas não consigo aplicar em um loop xhtml da seguinte forma:

Quando o registro for ímpar, a descrição deverá ficar à esquerda e a imagem à direita, quando for par, a descrição à direita e a imagem à esquerta.

Segue código xhtml:

	<c:forEach var="artista" items="#{artistaBean.artistas}">
		<div class="row">
			<div class="col-sm-6 descricao">
				<h4><h:outputLabel value="#{artista.nome}"/></h4>
				<hr />
				<p class="lead text-justify"><h:outputLabel value="#{artista.descricao}" /></p>
			</div>
			<div class="col-sm-6 imagem" style="background-image: url('#{artista.foto}')" />
		</div>
	</c:forEach>
	
</div>

Segue código CSS:

.descricao {
    float: left;
}

.imagem {
    margin: 0 !important;
    padding: 0 !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	float: right;
}

Alguém poderia me ajudar?

Desde já agradeço.

#2

Eu sugiro uma solução sem floats. O CSS ficaria assim:

.row {
  display: flex;
  justify-content: space-between;
}

.row:nth-of-type(odd) { /*vc pode usar even no lugar de odd */
  flex-direction: row-reverse;
}

.imagem {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100px;
  width: 100px;
}
1 curtida
#3

Obrigado @wldomiciano, problema resolvido! :grinning:

1 curtida