I have the following HTML code:
<div class="pages">
<span class="art-button-wrapper">
<span class="art-button-l"> </span>
<span class="art-button-r"> </span>
<input type="button" class="button cbppnext art-button" value="Next " />
</span>
<span class="art-button-wrapper">
<span class="art-button-l"> </span>
<span class="art-button-r"> </span>
<input type="button" class="button cbppprev art-button" value=" Previous" />
</span>
</div>

I want the buttons of class cbppnext to float right within the pages class and the buttons of class cbppprev to float left. All buttons are wrapped with the art-button-wrapper class. How do I select the art-button-wrapper class that contains the button of class cbppnext?

If I use the selector
.pages .art-button-wrapper
then all art-button-wrapper classes float right, so I know there is nothing else stopping this happening.

If I use the selector
.pages .art-button-wrappper input.cbppnext
then it doesn't float right on the page, presumably because the button is being floated right within the art-button-wrapper class, which is just large enough to contain the button.

I also tried
.pages .art-button-wrapper.cbppnext
among many other things and that had no visible effect either.

Can anyone help me solve this please?
Thanks.