Select before sibling with CSS or JavaScript for pagination

Question

.pagination__pages span.ng-scope:first-of-type + a {
  display: none;
}

<div ng-if="pagination.totalPages > 1" class="pagination pagination-collection ng-scope">
    <div class="hide-loading grid-x align-center align-middle">
       <div class="pagination__pages cell shrink">
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" href="#" class="ng-binding ng-scope" ss-ps="">1</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" class="ng-scope">...</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">2</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">3</a>
          <span ng-repeat-end="" ng-if="page.active" class="ng-binding ng-scope">4</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">5</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">6</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" class="ng-scope">...</span>
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" href="#" class="ng-binding ng-scope" ss-ps="">51</a>
       </div>
    </div>
 </div>

I've this pagination and I'm trying to remove the elements which come immediately after and before a particular class.

Here's the illustration

As you can see, I'm trying to remove '2' and '6' that come after and before '...'.

I can hide the first one but having trouble trying to hide the 'previous sibling' for second one.

I'd prefer CSS solution if possible, if there isn't one then with JavaScript or jQuery is fine too.

Any help is highly appreciated.

then you don't let them get generated. You must be able to define how many elements are getting rendered in your pagination — cloned, Oct 03 '19 at 10:22
I am not sure how to flag this question. First, it seems to be a duplicate of [this](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector) question, but also asks about how it could be done in JavaScript. Yet, it is at the same time an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) question, meaning that even if the question has an answer in the (potential) duplicate, probably the OP should disregard that and change their approach to the problem. — Rashad Saleh, Oct 03 '19 at 10:47
@RashadSaleh Trust me, the link you provided is the first result came through when I googled my question first. It doesn't really answer my question. — shutupchigo, Oct 03 '19 at 10:51

score 0 · Answer 1 · answered Oct 03 '19 at 10:46

You can hide them using CSS not actually hide them but before and after elements can be overlapped. Here is the example.

.pagination__pages > * {
 box-sizing: border-box;
 display: inline-block;
 width: 20px;
 height: 20px;
 line-height: 20px;
 text-align: center;
 background-color: #fff;
}

.pagination__pages span.ng-scope:not(.ng-binding) {
 margin-right: -24px;
 position: relative;
}

.pagination__pages span.ng-scope:not(.ng-binding) ~ span.ng-scope:not(.ng-binding) {
 margin-left: -24px;
 margin-right: 0;
}

<div ng-if="pagination.totalPages > 1" class="pagination pagination-collection ng-scope">
    <div class="hide-loading grid-x align-center align-middle">
       <div class="pagination__pages cell shrink">
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" href="#" class="ng-binding ng-scope" ss-ps="">1</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" class="ng-scope">...</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">2</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">3</a>
          <span ng-repeat-end="" ng-if="page.active" class="ng-binding ng-scope">4</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">5</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">6</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" class="ng-scope">...</span>
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" href="#" class="ng-binding ng-scope" ss-ps="">51</a>
       </div>
    </div>
 </div>

I appreciate your answer. But I don't think this solution would work. — shutupchigo, Oct 03 '19 at 10:54

Asfan Shaikh · Answer 2 · 2019-10-03T11:12:15.187

Here is jQuery code to hide before and after elements..

jQuery(document).ready(function($) {
  $('.pagination__pages span:contains("...")').each(function(index){
    if(index < 1){
      $(this).next().hide();
    }
    else{
      $(this).prev().hide();
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-if="pagination.totalPages > 1" class="pagination pagination-collection ng-scope">
    <div class="hide-loading grid-x align-center align-middle">
       <div class="pagination__pages cell shrink">
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" href="#" class="ng-binding ng-scope" ss-ps="">1</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage > 3" class="ng-scope">...</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">2</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">3</a>
          <span ng-repeat-end="" ng-if="page.active" class="ng-binding ng-scope">4</span>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">5</a>
          <a ng-repeat-start="page in pagination.getPages(5) track by $index" ng-if="!page.active" href="#" class="ng-binding ng-scope" ss-ps="">6</a>
          <span ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" class="ng-scope">...</span>
          <a ng-if="pagination.totalPages > 5 &amp;&amp; pagination.currentPage < (pagination.totalPages - 2)" href="#" class="ng-binding ng-scope" ss-ps="">51</a>
       </div>
    </div>
 </div>

Select before sibling with CSS or JavaScript for pagination

2 Answers2