Twitter Bootstrap Question posted in

bootstrap row > column selection issue-Twitter bootstrap

What I want to do is remove the last child border from this column, but it doesn’t work. Here is the code:

.softdev-per{
    margin-top: 3rem;
    text-align: center;
    font-size: 2.6rem;
    padding-left: 2rem;
    border-right: 2px solid $color-light-blue;
}

.softdev-per:nth-last-child(){
    border-right: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
       <div class="col-lg-3">
         <div class="softdev-per">
          <p>+<span>35</span>%</p>
          <p>lead 1</p>
         </div>
       </div>
       <div class="col-lg-3">
        <div class="softdev-per">
         <p>+<span>60</span>%</p>
         <p>lead 2</p>
        </div>
      </div>
      <div class="col-lg-3">
        <div class="softdev-per">
         <p>+<span>25</span>%</p>
         <p>lead 3</p>
        </div>
      </div>
      <div class="col-lg-3">
        <div class="softdev-per">
         <p>+<span>28</span>%</p>
         <p>lead 4</p>
        </div>
      </div>
</div>

all I want to do is to remove the last child border-right but it doesn’t work.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i fixed the problem by adding a class inside column then select it with css with :nth-last-child(1) , and it worked .

    like this :

    <div class="col-lg-3 softdev-percentage">

 .softdev-percentage:nth-last-child(1) .softdev-perc{
    border-right: none;
    }

  2. 0

    :nth-last-child() expects an expression inside parentheses, you’re most likely looking for just :last-child

    From MDN

    :nth-last-child( <nth> [ of <complex-selector-list> ]? )

    Comment from author:

    its working without bootstrap row column , but it doesn’t work when I
    add row column from boostrap .

    it is because you need to set the last-child in .col-lg-3 instead of .softdev-per,

    something like this:

    .col-lg-3:last-child .softdev-per{ /* code */}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search