How to select the last element with CSS?

Question

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>

Just search online... [:last-of-type](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type) — Sfili_81, Mar 13 '23 at 13:43
Does this answer your question? [How can I select the last element with a specific class, not last child inside of parent?](https://stackoverflow.com/questions/7298057/how-can-i-select-the-last-element-with-a-specific-class-not-last-child-inside-o) — Remus Crisan, Mar 13 '23 at 13:45
_"Here is my HTML code"_ - that is not plain HTML, but appears to be from one of those client-side frameworks. Please tag appropriately at least. — CBroe, Mar 13 '23 at 13:48
`.item-line:last-of-type{ background: black; }` It is selecting all the elements somehow — Ignacio García, Mar 13 '23 at 13:49
`:nth-child(3)` applied to the `span` of course makes no sense here - that span is the _second_ child of its parent, and there _are_ only two children. — CBroe, Mar 13 '23 at 13:50
It would help us if you could show us the actual HTML that has been generated. You can do this easily by copying it from your browser's devtools inspect facility. How about putting into your question the HTML that is created when there are just 3 items? — A Haworth, Mar 13 '23 at 13:52
So the actual element that you want to select the last one of, is the `div` that is child of `.stepper-container`. You want `.stepper-container > div:last-of-type .item-line { ...}` — CBroe, Mar 13 '23 at 14:14

score 1 · Answer 1 · edited Mar 18 '23 at 22:01

1

Try Using this, It will work

.item-line:last-of-type {
    display: none;
}

edited Mar 18 '23 at 22:01

F. Müller

3,969
8
38
49

answered Mar 13 '23 at 13:47

Abdullah Waseem

21
2

It is selecting all the elements with .item-line class somehow – Ignacio García Mar 13 '23 at 13:50
5

@IgnacioGarcía it applies to the last element of its type, within a list of _siblings_. And _all_ of your `.item-line` elements _are_ the last element of their type, within their respective parents. – CBroe Mar 13 '23 at 13:52

score 1 · Accepted Answer · answered Mar 13 '23 at 14:16

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;
}

How to select the last element with CSS?

2 Answers2