CODEWITHSUNDEEP
htmlcss
LJ Wadowski
LJ Wadowski

Reputation: 6720

Apply CSS style to last visible element

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

Upvotes: 5

Views: 11491

Answers (4)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

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>

Upvotes: 4

George
George

Reputation: 36784

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.

Upvotes: 12

KiV
KiV

Reputation: 2263

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')

Upvotes: -3

RahulB
RahulB

Reputation: 2110

Remove border-right: none from .panel-i

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

Upvotes: 0

Related Questions