how to select last div if i give the last element display none?

Question

Please check the fiddle: http://jsfiddle.net/C23g6/1255/

I want the last child (7777) border top to be display none.

I tried but i couldn't get please give me solution.

Only through css

CSS
 .common.true{
  display: block;
   border-top: 1px solid red;
 }
 .common{
 display: none;
 }
 .true:last-child{
 border-top: none;
 }

I dont want the last child border not to be displayed. But not using nth child. some other way

what is the reason for choosing the 7777 div? is it always the last child? Or is there a specific reason you can't use `nth-child()` or `nth-last-child()`? — jbutler483, Nov 16 '15 at 09:31
You are searching for `:last-of-type` http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i — eMarine, Nov 16 '15 at 10:12

score 4 · Accepted Answer · edited Nov 16 '15 at 13:15

First thing, If you do display: none of last element then how can you use css on that element(hidden element).

If you want to get Id or class (attribute) to perform action on that, you should choose js or jquery.

Second thing, the last-child would be 8888, but you want to do with second last-child, then use this, it may work :

.common:nth-last-child(2){
        border-top:none !important;
     }`enter code here`

score 2 · Answer 2 · answered Nov 16 '15 at 09:37

You have a basic mistake in the HTML.Your last child in HTML is 8888 and you want to hide border-top of 7777.Use the following:

<div id="my-section">
    <div class="common true">1111</div>
    <div class="common">2222</div>
    <div class="common true">3333</div>
    <div class="common true">4444</div>
    <div class="common true">5555</div>
    <div class="common true">6666</div>
    <div class="common true">7777</div>
    <div class="common">8888</div>
</div>
.common.true{
      display: block;
       border-top: 1px solid red;
}
.common{
    display: none;
}
.true:last-child{
    border-top: none;
}
#my-section .common:nth-last-child(2){
    border-top:none !important;
    }

I have added a new css selector,which hide the border of 2nd last child.

how to select last div if i give the last element display none?

2 Answers2