Selecting classes with nth-child

Question

I'm looking for help with using the nth-child CSS selector. If you take a look at my HTML...

<div id="report">
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="a">A</div>
    <div class="a">A</div>
    <div class="a">A</div>
</div>

...I have a row of letters like this:

AAAABAAAABAAA

I want to only show the first B and hide the others, however I cannot seem to select the classes as I expect. When I try to use:

.b:nth-child(1){
    display: block;
}

.b:nth-child(n+2){
    display: none;
}

It doesn't work and I have to select it using (5) to just get the first B.

Help would be greatly appreciated.

JSFiddle: http://jsfiddle.net/SrM9T/1/

Answer 1

This does not require javascript

.b ~ .b{
    display:none;
}   

http://jsfiddle.net/KYAj8/1/

General sibling combinator

The general sibling combinator selector is very similar to the adjacent sibling combinator selector The difference is that that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.

More info

Answer 2

this is your jquery

$('.b').not('.b:eq(0)').hide();

Demo