Class selection with nth-child

Question

I am looking for help using the nth-child CSS selector. If you 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 string of letters like this:

 AAAABAAAABAAA 

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

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

This does not 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

No javascript required for this

 .b ~ .b{ display:none; } 

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

Common combiter

The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that the selected item does not need to immediately overcome the first item, but may appear somewhere after it.

More details

Answer 2

this is your jquery

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

Demo

Answer 3

Using jquery

 $('.b:not(div:first)').hide(); 

Here i put the fiddle demo