Apply CSS rule to all element with specific class but the last

Issue

In the below code, how can I apply CSS rules to all of an specific Class .box but NOT to the last one?

I already tried :not(:last-of-type) and :not(:last-child) but they are not doing the job

.box{
  height:40px;
  width:100%;
  padding:12px;  
}
.box:not(:last-of-type){
  border-bottom: 1px solid #ddd; 
}
.box:not(:last-child){
  border-bottom: 1px solid #ddd; 
}

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>   

Solution

try wrapping it with a parent element and try applying the styles as below

check this snippet

.box {
  height: 40px;
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}
.box:last-of-type {
  border:none ;
}

<div class="Wrapper">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

or

you can use last-child as

.box {
  height: 40px;
  width: 100%;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}
.box:last-child {
  border:none;
}

<div class="Wrapper">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

Hope it helps

Answered By - Geeky