CODEWITHSUNDEEP
jqueryhtmlcss
user3007294
user3007294

Reputation: 951

CSS nth-child issue while setting display to none

HTML:

<div class="section fp-section fp-table active"></div>
<div class="section fp-section fp-table"></div>
<div class="section fp-section fp-table"></div>
<div class="section fp-section fp-table"></div>
<div class="section fp-section fp-table"></div>

All five divs are exactly the same and just add 'active' pending on which div is selected. How would I go about removing the forth div? I've tried nth-child and displaying none, but had no luck.

Upvotes: 0

Views: 476

Answers (4)

Jimmie Tyrrell
Jimmie Tyrrell

Reputation: 1658

nth-child worked fine for me

div:nth-child(4) {
  display: none;
}

http://codepen.io/anon/pen/hIyDm

Upvotes: 0

immayankmodi
immayankmodi

Reputation: 8580

Here is alternative way to achieve this:

div:nth-last-child(2) {
    display: none;
}

Hope it also helps!

Upvotes: 0

Benjamin
Benjamin

Reputation: 2670

Jquery Version

$('div:nth-child(4)').remove();

DEMO

You can also hide() instead of remove() that works too.

Upvotes: 2

Benjamin
Benjamin

Reputation: 2670

Try this

div:nth-of-type(4){
   display:none;
}

DEMO

Upvotes: 3

Related Questions