Question 46052 in CSS Question posted in
Some basic documentation can be found here.

How to select the last element with CSS?

I am working on a stepper and I want my last .step-item with a display: none. Here is my HTML code:

<div v-for="(step, i) in steps" :key="step.name">
    <div class="stepper-wrapper d-flex flex-column">
        <div class="stepper-item" :class="[step.completed ? 'completed' : '', isActive(step.name) ? 'active' : '']">
            <div class="step-counter mr-5">
                <i v-if="step.completed" class="fas fa-check" style="color:white; font-size: 11px;"></i>
                <h6 v-else class="modal-title muted-theme">{{ i + 1 }}</h6>
            </div>
            <div class="step-name">{{ step.description }}</div>
        </div>
        <span class="item-line"></span>
    </div>
</div>

I would need to select the last span rendered with class .item-line and set a display: none only for that element.

I have tried using CSS pseudoselectors like :nth-child:

//There are only 3 items
    //First try
    .stepper-wrapper span.item-line:nth-child(3){
        background: black;
    }
    //Second try
    span.item-line:nth-child(3){
        background: black;
    }
    //Third try
    item-line:nth-child(3){
        background: black;
    }
    //Forth try
    span:nth-child(3){
        background: black;
    }

Any idea how can I select that particular element?

Pd: The background property was only for testing purposes

HTML created:

/* First try */

.stepper-wrapper span.item-line:nth-child(3) {
  background: black;
}


/* Second try */

span.item-line:nth-child(3) {
  background: black;
}


/* Third try */

item-line:nth-child(3) {
  background: black;
}


/* Forth try */

span:nth-child(3) {
  background: black;
}
<div class="col-md-4 stepper-container">
  <div class="text-center mt-5 mb-5 p-3">
    <a style="cursor: pointer;"><img height="25px" src="/wc/ignacio/chronos-wallet-web/themes/chronos_wallet/images/chronos-pay.svg"></a>
  </div>
  <div>
    <a href="#/businessInformation" aria-current="page" class="router-link-exact-active router-link-active">
      <div class="stepper-wrapper d-flex flex-column">
        <div class="stepper-item completed active">
          <div class="step-counter mr-5"><i class="fas fa-check" style="color: white; font-size: 11px;"></i></div>
          <div class="step-name">Carga documentos de tu empresa</div>
        </div> <span class="item-line"></span></div>
    </a>
  </div>
  <div>
    <a href="#/jumioVerification" class="">
      <div class="stepper-wrapper d-flex flex-column">
        <div class="stepper-item">
          <div class="step-counter mr-5">
            <h6 class="modal-title muted-theme">2</h6>
          </div>
          <div class="step-name">Verificación de identidad</div>
        </div> <span class="item-line"></span></div>
    </a>
  </div>
  <div>
    <a href="#/finalBeneficiaries" class="">
      <div class="stepper-wrapper d-flex flex-column">
        <div class="stepper-item">
          <div class="step-counter mr-5">
            <h6 class="modal-title muted-theme">3</h6>
          </div>
          <div class="step-name">Ingresá los beneficiarios finales</div>
        </div> <span class="item-line"></span></div>
    </a>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Try Using this, It will work

    .item-line:last-of-type {
    display: none;
}
    Login or Signup to reply.
  2. 0

    To get the element which has class item-line in the last direct child element of stepper wrapper you need to select the last direct child element and then the item-line element.

    How exact you have to be in your selection will depend on what all the possible scenarios are but with the code you have given this should do it:

    .stepper-container > div:last-of-type span.item-line {
  display: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search