how to hide first and last element from the three same element

Question

I have three div with the same class name, I want to hide the first and last div.

My code:

<div class="clsname">div1</div>
<div class="clsname">div2</div>
<div class="clsname">div3</div>

Now i want to hide div1 and div3. In fact i want this output in browser:

div2

How can i do that ?

For clarification, I want something like this: (this would hide only div3 )

div.clsname + div.clsname + div.clsname {display:none;}

You could add a new class to div1 and div3 and apply the `{display:none;}` rule to it. — doru, Jun 07 '15 at 18:43
It depends on the rest of your markup. There's **NO** `:first-of-class`/`:last-of-class` things in CSS. — Hashem Qolami, Jun 07 '15 at 18:44
@HashemQolami You are assuming that, but he never ask for that. — lmgonzalves, Jun 07 '15 at 18:47

Nikhil Aggarwal · Answer 1 · 2015-06-07T18:33:17.397

4

You can achieve this by following

var elements = jQuery(".clsname");
for (var i = 0 ; < elements.length; i++) {
     if( i == 0 || i = elements.length -1) {
           jQuery(element[i]).style("display" : "none");
     }

}

This will hide the 1st and last element with specific class.

edited Jun 07 '15 at 18:33

answered Jun 07 '15 at 18:32

Nikhil Aggarwal

28,197
4
43
59

Is it impossible to do that via CSS ? – Jun 07 '15 at 18:32
Yes. just as lmgonzalves said – Nikhil Aggarwal Jun 07 '15 at 18:35
Thanks Bro, just i want to know `div.clsname:first-child` will support in what ver of browsers ? – Jun 07 '15 at 18:38
1

It should work in all browser. Please refer to "http://www.w3schools.com/cssref/sel_firstchild.asp" – Nikhil Aggarwal Jun 07 '15 at 18:39
Why not to use vanilla JavaScript rather than jQuery? You could simply iterate over `document.getElementsByClassName("clsname")` to match the proper elements, – Hashem Qolami Jun 07 '15 at 18:47
@HashemQolami I don't want to use `js` – Jun 07 '15 at 18:49

score 3 · Accepted Answer · answered Jun 07 '15 at 18:33

3

Use this simple CSS:

div.clsname:first-child, div.clsname:last-child{
    display:none;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/aLaw2qj5/

answered Jun 07 '15 at 18:33

lmgonzalves

6,518
3
22
41

All modern browsers, including IE9+. Take a look at http://stackoverflow.com/questions/7938521/browser-support-for-css-first-child-and-last-child. – lmgonzalves Jun 07 '15 at 18:38
1

`:last-child` is not supported in IE < 9. Also it doesn't respect the classes, it looks for the child element itself matching the rest of the selectors. – Hashem Qolami Jun 07 '15 at 18:40
@HashemQolami This works If the three divs are the only children in the parent. And in that case, the OP's solution in the question (using plus signs) will work to get around the missing `:last-child` problem. – Mr Lister Jun 07 '15 at 18:55
it's also pretty bad to over-qualify a selector with an html tag, not best practice – Toni Leigh Jun 07 '15 at 20:03

score 2 · Answer 3 · answered Jun 07 '15 at 18:56

lmgonzalves can be a valid answer. But you don't show all your markup, so Hashem Qolami is right, it could not be what you want.

May be a better solution could be

.clsname, .clsname + .clsname + .clsname { display: none;}
.clsname + .clsname { display: block;}

score 1 · Answer 4 · answered Jun 07 '15 at 18:36

1

div.clsname:first-child{
  display:none;
}

div.clsname:last-child{
 display:none;
}

answered Jun 07 '15 at 18:36

Daniel

1,438
6
20
37

3

@lmgonzalves And none of the two answers work if `div.clsname` is not matching exactly the first or last ***child*** of its parent. – Hashem Qolami Jun 07 '15 at 18:42

score 1 · Answer 5 · answered Jun 07 '15 at 19:01

Here is a solution that targets only the three divs with the class and leaves the other divs alone. (So it works either with or without other divs in between.)

div.clsname, div.clsname ~ div.clsname ~ div.clsname {display:none}
div.clsname ~ div.clsname {display:block}

<div>Other div, displayed normally</div>
<div class="clsname">div1</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div class="clsname">div2</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div class="clsname">div3</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>
<div>Other div, displayed normally</div>

Compatible with all modern browsers, and even IE8.

how to hide first and last element from the three same element

5 Answers5