CSS for styling the page buttons

pingcrosby

I am trying to replace the pager next/previous, last/first buttons with images, but am having difficulty with the correct css selector.

The css below, places an image along side the number, next and last. But i need to indivdually select the 'next' button for example to supply a custom image.

    .dataTables_wrapper .dataTables_paginate .paginate_button  {
            color:red !important;
             background: rgba(0, 0, 0, 0) url("./content/sorting_down.png") no-repeat scroll right center;
        }

This css does nothing... (.dataTables_wrapper .dataTables_paginate .paginate_button .next

    .dataTables_wrapper .dataTables_paginate .paginate_button .next  {
            color:red !important;
             background: rgba(0, 0, 0, 0) url("./content/sorting_down.png") no-repeat scroll right center;
        }

Firebug reveals this css for the page button

<a class="paginate_button current" aria-controls="example" data-dt-idx="2" tabindex="0">1</a>
<a class="paginate_button " aria-controls="example" data-dt-idx="3" tabindex="0">2</a>

Can you point me in the right direction; CSS ( and js ) are not my strong suit.

Current table options are

     processing: true,
        serverSide: true,
        pagingType: "full_numbers",
        lengthMenu: [5, 10, 15],
        language:  {
            paginate: {
                first: "Fsairst",
                last: "Laasst",
                next: "nxt",
                previous: "Preavious"
            }
        },

Thanks in advance