:last child override all in vuejs - html

Question

hello i have this in vuejs
<ul class="new-list">
<div v-for="cat in catss">
<div>
<a :href="link(cat)">
<li class="single-new">
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
and i have this style
.single-new {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
.single-new:last-child {
border:none;
}
but .sing-new:last-child overrid all items and remove border of all
how can i fix this

Answer 1

:last-child always confused, MDN explains it
The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
In your example, what you want is the border of the last item in the list is none.
So, you should do this
.new-list > div:last-child .single-new {
border: none;
}

Answer 2

Every li you have is a last-child of an a tag.
try i like this
<ul class="new-list">
<div v-for="cat in catss" class="single-new">
<div>
<a :href="link(cat)">
<li>
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
.single-new li {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
.single-new:last-child li {
border:none;
}
You should remove all the div, a before the li. directly under an ul are supposed to be li.
You also should not put p (block) inside an a (inline). Use span instead.
Here is a link about the inline/block nature of html elements: Link

Answer 3

I guessed this is what you want
<ul class="new-list">
<div v-for="cat in catss" class="cat">
<div>
<a :href="link(cat)">
<li class="single-new">
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
CSS
.cat {
.single-new {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
}
.cat:last-child {
.single-new {
border:none;
}
}