CSS/SCSS select element not having successor with class - css

Question

I have the following html:
<ul class="pagination ">
<li class="">
<a href="/en/products/page5">
<span><i class="fa fa-chevron-left"></i></span>
</a>
</li>
<li class="">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="active">
6
</li>
<li class="hide">
<a href="/en/products/page7">
<span><i class="fa fa-chevron-right"></i></span>
</a>
</li>
</ul>
In this example, I'm on the last page, so the 'next page' button is automatically hidden.
I want the last visible item (page 6) to have rounded borders.
How can I select 'page 6' with css/scss without changing the HTML?
I thought about something like this:
.pagination > li:not( + li.hide) > a,
.pagination > li:not( + li.hide) > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
But this doesn't work.
Just to be clear: I want to select the item before the .hide without depending on the .active class.

Answer 1

You can use the :nth-last-child() selector to start from the end of the list of items and select the second to last item you have. Here is how nth-last-child works.
.pagination > li {
border: 2px solid #000;
display: inline-block;
padding: 5px 10px;
margin: 5px;
}
.pagination > li.active:nth-last-child(2) {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.pagination > li.hide {
display: none;
}
<ul class="pagination ">
<li class="">
<a href="/en/products/page5">
<span><i class="fa fa-chevron-left"></i></span>
</a>
</li>
<li class="">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="active">
6
</li>
<li class="hide">
<a href="/en/products/page7">
<span><i class="fa fa-chevron-right"></i></span>
</a>
</li>
</ul>

Answer 2

I don't think you can achieve this with css alone.
I know you haven't tagged your question with javascript or jquery, but here is a solution using CSS and jQuery that may help.
I've used color property instead of border for simplicity.
$('.hide').prev("li").find("a").addClass('border');
.border {
color: red;
}
.pagination > li:last-child:not(.hide) > a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pagination ">
<li class="">
<a href="/en/products/page5">
<span><i class="fa fa-chevron-left"></i></span>
</a>
</li>
<li class="">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="active">
6
</li>
<li class="hide">
<a href="/en/products/page7">
<span><i class="fa fa-chevron-right"></i>arrow</span>
</a>
</li>
</ul>
<ul class="pagination ">
<li class="">
<a href="/en/products/page5">
<span><i class="fa fa-chevron-left"></i></span>
</a>
</li>
<li class="">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li class="active">
6
</li>
</ul>