Hide all except first child of an element using pure css

Question

I am trying to hide every other child after first child of classa class element.

div.classa {
    display:none;
}
div.classa:first-child {
    display:block !important;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

How to achieve this using pure css.

whether you want to show first '
' or '
'
– stanze Apr 13 '15 at 05:55 — stanze, Apr 13 '15 at 05:55
be precise about what you want to show. – Sushovan Apr 13 '15 at 05:58 — Sushovan, Apr 13 '15 at 05:58

score 48 · Answer 1 · edited Nov 28 '16 at 22:56

48

Check out here https://jsfiddle.net/32vw04jg/1/

<div class="content">
  <div>
    <h3>abc</h3>
    <div class="classa">some content</div>
  </div>
  <div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
  </div>
  <div>
    <h3>header3</h3>
    <div class="classa">another content</div>
  </div>
</div>


.content > div:not(:first-child) {
display: none;
}

edited Nov 28 '16 at 22:56

Legionar

7,472
2
41
70

answered Apr 13 '15 at 06:21

Aayushi Jain

2,861
2
29
36

score 15 · Accepted Answer · answered Apr 13 '15 at 06:13

If you want to support IE8, then your only option is general sibling selector:

div.classa ~ .classa {
    display: none;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

score 14 · Answer 3 · answered Apr 13 '15 at 06:12

The problem in your code is that you want to hide the first .classa, but the first .classa isn't the first child in .content, the h3 is the first child.

So as an alternative to the :not() pseudo class, you could use nth-of-type(n+2). It will select all elements with the same type, except the first one.

div.classa:nth-of-type(n+2) {
    display:none;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

Matjaž · Answer 4 · 2015-04-13T06:21:49.087

4

You can do it like that:

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content1</div>
    <h3>xyz</h3>
    <div class="classa">more content2</div>
    <h3>header3</h3>
    <div class="classa">another content3</div>
</div>

Css:

.content > .classa:not(:nth-of-type(2)) {
    display:none;
}

edited Apr 13 '15 at 06:21

answered Apr 13 '15 at 06:01

Matjaž

2,096
3
35
55

Thanks! But it seems this code isn't working, even on firefox - am I doing something wrong? https://jsfiddle.net/32vw04jg/ – biztiger Apr 13 '15 at 06:12

thetont · Answer 5 · 2019-04-04T15:50:10.903

If I can understand correctly the question the goal here is to hide every child (h3 and div.classa) with the exception of the first h3 and the div.classa next to it.

The easiest way to accomplish it is a combination of the :first-of-type and the ~ (general siblings) selectors.

div.classa:first-of-type ~ * { display:none; }

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

score 1 · Answer 6 · edited May 23 '17 at 11:54

1

You can try the :not pseudo class — https://developer.mozilla.org/en-US/docs/Web/CSS/:not

See this answer

edited May 23 '17 at 11:54

Community

1
1

answered Apr 13 '15 at 06:02

Marco Bernardini

695
6
17

Thanks. Any alternative to support ie8? – biztiger Apr 13 '15 at 06:09

score 1 · Answer 7 · answered Apr 13 '15 at 06:18

1

There is new CSS3's :first-of-type for your case: Demo

.content h3, .content div{
    display:none;
}
.content .classa:first-of-type{  
    display : block;
}

answered Apr 13 '15 at 06:18

stanze

2,456
10
13

score -2 · Answer 8 · answered Feb 19 '16 at 13:11

-2

.content > *{ display: none;}
.content > *:first-child{ display: block !important; }

answered Feb 19 '16 at 13:11

Mehedi Hasan

1

Hide all except first child of an element using pure css

' or ''

8 Answers8

' or '
'