CODEWITHSUNDEEP
htmlcsscss-selectors
adamjld
adamjld

Reputation: 116

Selecting classes with nth-child

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/

Upvotes: 6

Views: 197

Answers (3)

user3726265
user3726265

Reputation: 21

By Using Jquery 

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

Here i put the fiddle demo

Upvotes: 1

Amit Kumar
Amit Kumar

Reputation: 5962

this is your jquery

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

Demo

Upvotes: 2

user1850421
user1850421

Reputation:

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

Upvotes: 17

Related Questions