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/

the `nth-child` is not applied after the class selector, it always selects the element at the passed index with respect to the parent... — Arun P Johny, Jun 10 '14 at 12:49
@ArunPJohny with all due respect you can add these in a single comment or an answer instead of spamming comments… — T J, Jun 10 '14 at 12:56
Please stop suggesting to use a whole javascript framework to do something that can be done with CSS. — , Jun 10 '14 at 12:57
I'm afraid there really is not way of doing this in CSS alone. What you would want to use is :nth-of-type but you can only use this on elements and not classes. If you made all the b's span's then you could get it to work. — Colin Bacon, Jun 10 '14 at 13:00
http://jsfiddle.net/SrM9T/15/ try this if u know which nthchild u want to select — M.chaudhry, Jun 10 '14 at 13:02
@adamjld You can also use `.b:nth-child(2n-1)` to select what you want, but that's admittedly a more round-about way of doing it :-P — TylerH, Jun 10 '14 at 13:24
Related: [CSS selector for first element with class](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) (I originally marked this a dupe, but on closer inspection it's not quite one, although still related) — BoltClock, Jun 10 '14 at 13:42

score 17 · Accepted Answer · 2014-06-10T13:04:30.720

17

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

edited Jun 10 '14 at 13:04

answered Jun 10 '14 at 12:56

This is nice, you can chain it too eg `.b:none`, `.b~.b:block`, `.b~.b~.b:none` – James Jun 10 '14 at 13:09
1

It always surprises me how obscure the `~` combinator is, given that even IE7 has partial support for it so it's been available to use for quite some time. Note that this answer assumes the default `display: block` for `div` elements which obviates the need for a general `.b` selector - if you're looking to apply arbitrary styles to the first element, you'll need to apply them using the general rule, then undo them using the sibling rule, as explained [here](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107). – BoltClock Jun 10 '14 at 13:40
@BoltClock the answer originally had `display block`. – Jun 10 '14 at 18:37

score 2 · Answer 2 · edited Jun 11 '14 at 04:28

2

this is your jquery

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

Demo

edited Jun 11 '14 at 04:28

Sudharsan S

15,336
3
31
49

answered Jun 10 '14 at 12:58

Amit Kumar

5,888
11
47
85

are you guys mad. did you check the fiddle . – Amit Kumar Jun 10 '14 at 13:03
I think this is still a valid answer.. since the OP tagged jquery in his question – webkit Jun 10 '14 at 13:03
yes. he tagged this question in jquery . so we can give a solution in jquery. – Amit Kumar Jun 10 '14 at 13:05
3

Please don't suggest that people use javascript, let alone a whole javascript framework, to solve a CSS issue that can be solved with CSS – Jun 10 '14 at 13:06
that fine. but they should take care while tagging question. they shouldn't tag jquery when they don't want answer in that. because here people believe in downvoting more than checking answer. – Amit Kumar Jun 10 '14 at 13:08
They don't know any better. You do: edit the question. – Jun 10 '14 at 13:09
1

@NigelAngel Don't assume that the jQuery framework isn't already being used, either. OP tagged it in the question himself, therefore it's a valid answer. – Blazemonger Jun 10 '14 at 13:11

score 1 · Answer 3 · answered Jun 11 '14 at 11:10

1

By Using Jquery

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

Here i put the fiddle demo

answered Jun 11 '14 at 11:10

user3726265

21
3

Selecting classes with nth-child

3 Answers3