How to hide li classes

[newcoder1010]

Hello,

 

I have this html:

<ul class="pagination"><li class="pager-first"><a title="Go to first page" href="/articles-0" tabindex="-1">« first</a></li>
<li class="prev"><a title="Go to previous page" href="/articles-0" tabindex="-1">‹ previous</a></li>
<li><a title="Go to page 1" href="/articles-0" tabindex="-1">1</a></li>
<li class="active"><span>2</span></li>
<li><a title="Go to page 3" href="/articles-0?page=2" tabindex="-1">3</a></li>
<li><a title="Go to page 4" href="/articles-0?page=3" tabindex="-1">4</a></li>
<li><a title="Go to page 5" href="/articles-0?page=4" tabindex="-1">5</a></li>
<li><a title="Go to page 6" href="/articles-0?page=5" tabindex="-1">6</a></li>
<li class="next"><a title="Go to next page" href="/articles-0?page=2" tabindex="-1">next ›</a></li>
<li class="pager-last"><a title="Go to last page" href="/articles-0?page=5" tabindex="-1">last »</a></li>
</ul>

How to hide the li classes which have numbers? In this case, 1-6. But numbers will go up. I simply like to keep first two(pager-first, prev) and last two(pager-last, next). I am not sure how I can achieve that. Please advise.

Edited November 26, 2016 by newcoder1010

[dsonesuk]

.prev ~ li{display:none;}

 

.prev ~ .next,.next ~ li{display: block;}

 

[newcoder1010]

When I go to 2nd page, then I see html that I gave u original post. Your css worked. Thanks.

 

 

When I visit the page first time, I get this below html. In this html, there is no prev or first page class.

<ul class="pagination"><li class="active"><span>1</span></li>
<li><a title="Go to page 2" href="/articles-0?page=1">2</a></li>
<li><a title="Go to page 3" href="/articles-0?page=2">3</a></li>
<li><a title="Go to page 4" href="/articles-0?page=3">4</a></li>
<li><a title="Go to page 5" href="/articles-0?page=4">5</a></li>
<li><a title="Go to page 6" href="/articles-0?page=5">6</a></li>
<li class="next"><a title="Go to next page" href="/articles-0?page=1">next ›</a></li>
<li class="pager-last"><a title="Go to last page" href="/articles-0?page=5">last »</a></li>
</ul>

What would be css for this html to remove the numbers please?

[dsonesuk]

For modern browsers

.pagination li:not(.next):not(.prev):not(.pager-first):not(.pager-last) {display: none;}

for modern and older crappy IE versions

.pagination li {display: none;}
.pagination li.prev, .pagination li.next, .pagination li.pager-last, .pagination li.pager-first {display: block;} /*OR current display property used*/

[newcoder1010]

Thank you.