Apply CSS style to last visible element

Question

I have read this thread: A CSS selector to get last visible div

However, it's not working for me. I wonder where I made mistake?

My CSS

.panel-i{
   position: relative;
   margin: 4px 0;
   text-align: right;
   border: 1px solid;
   border-right: none;    
   min-height: 76px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 8px 10px 0;
   -webkit-flex: 1 1 30%;
   -moz-flex: 1 1 30%;
   -ms-flex: 1 1 30%;
   flex: 1 1 30%;  /* flex-grow flex-shrink, flex-basis */
 }

.panel-i:not( [style*="display: none"]):last-child{
    border-right: 1px solid;
}

And HTML

<div class="money_boxesRow">
   <div class="panel-i">
       <div class="panel-i-label">
          One Off Charge                                    
       </div>
       <span>                        
           £ <span id="total_one_off_charge">0.00</span>
       </span>
   </div>

   <!-- ... -->

   <div class="panel-i so_hide_commissions" style="display: none;">
      <div class="panel-i-label">
           Commission Total                                    
      </div>
      <span>                        
          £ <span id="total_commission">0.00</span>
      </span>
   </div>
</div>

I trying to add border right to last visible box... But it's not appearing.

JSFIDDLE

Did you actually read the thread you are quoting? Or you just read an answer and thought it was correct? — Abhitalks, Nov 12 '14 at 12:01
"*I wonder where I made mistake?*" - you appear not to have read the answer you tried to use, and misunderstood the `:last-child` selector. — David Thomas, Nov 12 '14 at 12:02
`.panel-i:not( [style*="display: none"]):last-child` selects the last child if it doesn't have `display:none;`. — web-tiki, Nov 12 '14 at 12:02

George · Answer 1 · 2014-11-12T12:16:25.947

12

The following selector:

.panel-i:not( [style*="display: none"]):last-child

Doesn't target the last in the .panel-i:not( [style*="display: none"]) selection. It targets, the last child of the parent, on the condition that .panel-i:not( [style*="display: none"]) is fulfilled.

:last-child is relative to the element's parent (hence child in the name). It is not relative to the selection that preceeds it.

edited Nov 12 '14 at 12:16

answered Nov 12 '14 at 12:03

George

36,413
9
66
103

Vitorino fernandes · Accepted Answer · 2014-11-12T12:26:57.443

Simple solution

demo - http://jsfiddle.net/d584ob1p/9/

Add

.panel-i:not(:first-child){
    border-left: 0;
}

Remove border-right from .panel-i

.panel-i{
    border-right: none;  /** remove **/
}

.money_boxesRow {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  align-items: stretch;
}
.panel-i {
  position: relative;
  margin: 4px 0;
  border: 1px solid;
  text-align: right;
  min-height: 76px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px 10px 0;
  -webkit-flex: 1 1 30%;
  -moz-flex: 1 1 30%;
  -ms-flex: 1 1 30%;
  flex: 1 1 30%;
  /* flex-grow flex-shrink, flex-basis */
}
.panel-i-label {
  text-transform: uppercase;
  font-size: 1.4em;
}
.panel-i > span {
  font-size: 3.2em;
  display: block;
  font-family: 'PT sans narrow';
  font-weight: bold;
}
.panel-i:not(:first-child) {
  border-left: 0;
}

<div class="money_boxesRow">
  <div class="panel-i">
    <div class="panel-i-label">One Off Charge</div> <span>                        
            £ <span id="total_one_off_charge">0.00</span>
    </span>
  </div>
  <div class="panel-i">
    <div class="panel-i-label">Monthly Charge</div> <span>                        
            £ <span id="total_monthly_charge">0.00</span>
    </span>
  </div>
  <div class="panel-i">
    <div class="panel-i-label">Monthly Charge Total</div> <span>                        
            £ <span id="total_lease">0.00</span>
    </span>
  </div>
  <div class="panel-i so_hide_commissions" style="display: none;">
    <div class="panel-i-label">Commission Total</div> <span>                        
            £ <span id="total_commission">0.00</span>
    </span>
  </div>
</div>

score 0 · Answer 3 · answered Nov 12 '14 at 12:04

0

Remove border-right: none from .panel-i

http://jsfiddle.net/d584ob1p/4/

answered Nov 12 '14 at 12:04

RahulB

2,070
1
18
26

score -3 · Answer 4 · answered Nov 12 '14 at 12:08

-3

I recommend to use jQuery to achieve this. where you get more flexibility and options. I have updated the fiddle.

FIDDLE: http://jsfiddle.net/kiranvarthi/d584ob1p/7/

$('.panel-i:visible:last').addClass('newclass')

answered Nov 12 '14 at 12:08

KiV

2,225
16
18

JavaScript is generally not a good idea to rely on for layout. – Ash Blue Jun 08 '18 at 20:59

Apply CSS style to last visible element

4 Answers4