[Vuejs]-Vue.js select last element within a div with pseudo selector

by

3👍

✅

This is actually not a Vue issue, but a matter of which elements your selector is acting on. The selector you’re using is selecting the last hr element inside each element with the .exampleclass class. What you really want is the last .exampleclass element’s hr.

You should be able to do that with the following:

.exampleclass:last-of-type > hr {
  border-color: blue;
}

Here’s a complete sample:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
      hr {
        border-color: green;
      }

      .exampleclass:last-of-type > hr{
        border-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-for="(item, i) in list" class="exampleclass">
        <div>
        <button>btn {{i}}</button>
        </div>
        <input placeholder="sometext"> {{ item }} </input>
        <hr />
      </div>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        list: ['itemOne', 'itemTwo', 'itemThree']
      }
    });
  </script>
</html>
👤Wes Harper

1👍

I would add a v-if to the hr and in that check whether it’s the last:

<hr v-if="i !== list.length - 1" />

👤Andre Nuechter

1👍

You are using the :last-of-type on wrong element. Because every .exampleClass have only one hr and there are multiple elements with class exampleClass.
So you should do it like this:

.exampleClass:last-of-type > hr {
  border-color: blue
}
👤Nipun Jain

Leave a comment