CSS or jQuery Selector for span within span

I am trying to select a span within a span within a div using plain CSS or JQuery selectors. The html is as follows:

<div id="example2_paginate" class="dataTables_paginate paging_full_numbers">
<span id="example2_first" class="first paginate_button pagi开发者_JAVA百科nate_button_disabled">First</span>
<span id="example2_previous" class="previous paginate_button paginate_button_disabled">Previous</span>
<span>
<span class="paginate_active">1</span>
<span class="paginate_button">2</span>
<span class="paginate_button">3</span>
<span class="paginate_button">4</span>
<span class="paginate_button">5</span>
</span>
<span id="example2_next" class="next paginate_button">Next</span>
<span id="example2_last" class="last paginate_button">Last</span>
</div>

I want to select spans that contain 1 to 5 (paginate_active and the 5 paginate buttons), individually.

With my very limited knowledge of CSS and jQuery I've tried a couple of things but I'm sure my syntax is wrong, like $("paging_full_numbers span:eq(1)") .

Could you please give me a hint of how to go about it?

To select them individually, you can simply select them all and then use jQuerys .each(). For example

spanList = $('#example2_paginate').find('.paginate_active, .paginate_button');

will find all classes of 'paginate_active' or 'paginate_button' that, are inside your element of id=example2_paginate. Then you can write:

 spanList.each(function(index){
    <-- code here for occurence of index index-->
});

Alternatively to select the i^th button without looping through them all:

spanList.eq(i)

See jsFiddle: http://jsfiddle.net/t4KWr/

This CSS is what you want.

div.paging_full_numbers > span > span.paginate_active, div.paging_full_numbers > span > span.paginate_button

A quick way to get, say, the third of the 5 spans would be:

$(".paging_full_numbers > span > span:nth-child(3)")

its seem that there is a problem with

$("paging_full_numbers span:eq(1)")

You should write like

$("#paging_full_numbers span:eq(1)")

Or if you are using class

 $(".paging_full_numbers span:eq(1)")

This select spans that contain 1 to 5 (paginate_active and the 5 paginate buttons), individually:

$("div.paging_full_numbers span:[class='paginate_active'],[class='paginate_button']").each(function(){
    //do what you want here
});

That select the span's with only class 'paginate_active' or only class 'paginate_button'