newcoder1010 Posted November 26, 2016 Share Posted November 26, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 26, 2016 Share Posted November 26, 2016 .prev ~ li{display:none;} .prev ~ .next,.next ~ li{display: block;} Link to comment Share on other sites More sharing options...
newcoder1010 Posted November 26, 2016 Author Share Posted November 26, 2016 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 26, 2016 Share Posted November 26, 2016 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*/ Link to comment Share on other sites More sharing options...
newcoder1010 Posted November 27, 2016 Author Share Posted November 27, 2016 Thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now