remove border bottom of last element-CodePudding

There is one popup. Selected installments are displayed in this pop-up. The user can choose as many installments as he/she wants. Selected installments have a border bottom. But I don't want the last item to be border bottom. I tried many ways but failed.

html

<div className="installmentinfo__container only-desktop">
  <div className="installmentinfo">
    <div className="column">
      <div className="installmentnumber" >{(i   1).toString()}</div>
      <div className="installmentdate">{billDate}</div>
      <div className="installmentamount">{e.amount} {e.currency}</div>
    </div>
  </div>
</div>

css

.installmentinfo__container.only-desktop {
  border: 1px solid #d1d1d1;
  border-radius: 10px;
  max-width: 300px;
  box-shadow: 2px 2px 4px 4px #d1d1d1;
  position: absolute;
  background-color: white;
  top: 210px;
  margin: auto;
  transform: translateX(-280px);
  padding: 0.3em;
  z-index: 999;

  .installmentinfo {

    width: 280px;
    height: auto;
    padding: 0em 1em;

    .column {
      display: flex;
      margin: 5px;
      justify-content: space-between;
      font-size: 1.3rem;
      border-bottom: 1.5px solid #d1d1d1;
      padding-bottom: 5px;
    }

    .installmentnumber {
      float: left;
    }

    .installmentdate {
      width: 50%;
      color: black !important;
    }

    .installmentamount {
      width: 50%;
      color: black !important;
      font-weight: 1000;
    }
  }
}

What i tried;

.column:last-child{
  border-bottom: none;
}

.last-child{
  border-bottom: none;
}

&:last-of-type {
  border-bottom: none;
}

CodePudding user response：

Use the last-of-type pseudo selector to remove the last item style

.column > div:last-of-type {
    border-bottom:none;
}

For More Details https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type

CodePudding user response：

psuedo-lastchild is not the last child of a parent container rather last child of a class.so what i did was gave all three segments a same class of segments for targeting the border side of the css and id for other css that was different from each other.

.installmentinfo__container.only-desktop {
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    max-width: 300px;
    box-shadow: 2px 2px 4px 4px #d1d1d1;
    /* position: absolute; */
    background-color: white;
    /* top: 210px; */
    margin: auto;
    /* transform: translateX(-280px); */
    padding: 0.3em;
    z-index: 999;
}
  
    .installmentinfo {
      width: 280px;
      height: auto;
      padding: 0em 1em;
    }
      .column {
        display: flex;
        flex-direction: column;
        margin: 5px;
        justify-content: space-between;
        font-size: 1.3rem;
        /* border-bottom: 1.5px solid #d1d1d1; */
        padding-bottom: 5px;
      }
  
      #installmentnumber {
        float: left;
        width: 50%;
        
      }
  
      #installmentdate {
        width: 50%;
        color: black !important;
      }
  
      #installmentamount {
        width: 80%;
        color: black !important;
        font-weight: 100;
      }
      .segments{
        border-bottom: 1.5px solid #d1d1d1;
      }
      .segments:last-child{
        border-bottom: none;
      }

<body>
    <div >
        <div >
          <div >
            <div  id="installmentnumber" >{(i 1).toString()}</div>
            <div  id="installmentdate">{billDate}</div>
            <div  id="installmentamount">{e.amount}{e.currency}</div>
          </div>
        </div>
      </div>
</body>

CodePudding user response：

In your snippet your are giving border bottom to .column class and then you are try to overwrite it with border none with :last-child selector instead you can do like this,

If your are thinking about repeating .column div then you can use following snippet

.column:not(:last-of-type){
  display: flex;
  margin: 5px;
  justify-content: space-between;
  font-size: 1.3rem;
  border-bottom: 1.5px solid #d1d1d1;
  padding-bottom: 5px;
}

In can you want to repeat .installmentinfo div multiple times and you want to give border bottom to column when .installmentinfo isn't a last div then you can use following snippet

.installmentinfo:not(:last-of-type) .column{
      display: flex;
      margin: 5px;
      justify-content: space-between;
      font-size: 1.3rem;
      border-bottom: 1.5px solid #d1d1d1;
      padding-bottom: 5px;
}