Problemas para atacar classes

[oten 0]

Eu estou desenvolvendo um site com wordpress e estou tendo problemas para atacar algumas classes...

 

É uma coluna social e no caso eu preciso da seguinte estrutura:

 

foto na esquerda, texto alinhado a esquerda

foto na direita, texto alinhado a direita

 

FOTO TEXTO

TEXTO FOTO

FOTO TEXTO

TEXTO FOTO

 

e assim vai.

 

Fiz isso utilizando a parte de postagem de fotos e a legenda delas e me gerou esse codigo aqui na parte que interessa:

 

<p><div id="attachment_529" class="wp-caption alignnone" style="width: 310px"><a href="http://SITE.com.br/site/coluna/novo-teste/attachment/chrysanthemum/" rel="attachment wp-att-529"><img class="size-medium wp-image-529" title="Chrysanthemum" src="http://SITE.com.br/site/wp-content/uploads/2012/07/Chrysanthemum-300x225.jpg" alt="" width="300" height="225" /></a><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec augue metus, non dignissim metus. Proin auctor est eget magna laoreet interdum.</p></div><br />
<div id="attachment_530" class="wp-caption alignnone" style="width: 310px"><a href="http://SITE.com.br/site/coluna/novo-teste/attachment/desert/" rel="attachment wp-att-530"><img src="http://SITE.com.br/site/wp-content/uploads/2012/07/Desert-300x225.jpg" alt="" title="Desert" width="300" height="225" class="size-medium wp-image-530" /></a><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec augue metus, non dignissim metus. Proin auctor est eget magna laoreet interdum.</p></div><br />
<div id="attachment_531" class="wp-caption alignnone" style="width: 310px"><a href="http://SITE.com.br/site/coluna/novo-teste/attachment/hydrangeas/" rel="attachment wp-att-531"><img src="http://SITE.com.br/site/wp-content/uploads/2012/07/Hydrangeas-300x225.jpg" alt="" title="Hydrangeas" width="300" height="225" class="size-medium wp-image-531" /></a><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec augue metus, non dignissim metus. Proin auctor est eget magna laoreet interdum.</p></div><br />
<div id="attachment_532" class="wp-caption alignnone" style="width: 310px"><a href="http://SITE.com.br/site/coluna/novo-teste/attachment/koala-2/" rel="attachment wp-att-532"><img src="http://SITE.com.br/site/wp-content/uploads/2012/07/Koala1-300x225.jpg" alt="" title="Koala" width="300" height="225" class="size-medium wp-image-532" /></a><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec augue metus, non dignissim metus. Proin auctor est eget magna laoreet interdum.</p></div><br />
<div id="attachment_533" class="wp-caption alignnone" style="width: 310px"><a href="http://SITE.com.br/site/coluna/novo-teste/attachment/lighthouse/" rel="attachment wp-att-533"><img src="http://SITE.com.br/site/wp-content/uploads/2012/07/Lighthouse-300x225.jpg" alt="" title="Lighthouse" width="300" height="225" class="size-medium wp-image-533" /></a><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec augue metus, non dignissim metus. Proin auctor est eget magna laoreet interdum.</p></div><br />
<div id="attachment_534" class="wp-caption alignnone" style="width: 310px"><a href="http://SITE.com.br/site/coluna/novo-teste/attachment/penguins-2/" rel="attachment wp-att-534"><img src="http://SITE.com.br/site/wp-content/uploads/2012/07/Penguins1-300x225.jpg" alt="" title="Penguins" width="300" height="225" class="size-medium wp-image-534" /></a><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec augue metus, non dignissim metus. Proin auctor est eget magna laoreet interdum.</p></div></p>

 

ele gera as ids das divs incremental, então nao sei como atacar os ids, e tentei atacar as classes assim e nao funcionou:

 

<style type="text/css">
   .wp-caption{
       width:100% !important;
   }
   .wp-caption img{
       float:left !important;
   }
</style>

 

Aí depois eu estava pensando em usar jquery para atacar as divs pares e alinha-las a direita.

 

Se alguem puder ajudar ou dar alguma sugestão...

 

OBRIGADO.

[William Bruno 1501]

qndo você for postar as fotos no wordpress, já escolha se você quer para esquerda ou direita.

 

direto no editor de texto. Tecnicamente, e idealmente você não precisará mexer no css.

[oten 0]

Sim, willian, tem como fazer isso, mais o cliente quer isso mais "automatico", ai ele só vai precisar postar e colocar a legenda da foto, pois vou usar a legenda como "texto", ai alinho automaticamente, tentei mostrar pra ele ontem fazendo manualmente do jeito que você falou, mais ele nao gostou.

[André do Vale 76]

.wp-caption:nth-child(2n + 1) img{
 float:left !important;
}
.wp-caption:nth-child(2n + 2) img{
 float:right !important;
}

 

:even e :odd devem funcionar bem também.