CSS/SCSS私は、次のHTML持つクラス

Question

と後継者を持っていない要素を選択します。この例では

<ul class="pagination "> 
    <li class=""> 
     <a href="/en/products/page5"> 
      <span><i class="fa fa-chevron-left"></i></span> 
     </a> 
    </li> 
    <li class=""> 
     <a href="/en/products/page1">1</a> 
    </li> 
    <li class=""> 
     <a href="/en/products/page2">2</a> 
    </li> 
    <li class=""> 
     <a href="/en/products/page3">3</a> 
    </li> 
    <li class=""> 
     <a href="/en/products/page4">4</a> 
    </li> 
    <li class=""> 
     <a href="/en/products/page5">5</a> 
    </li> 
    <li class="active"> 
     <a href="/en/products/page6">6</a> 
    </li> 
    <li class="hide"> 
     <a href="/en/products/page7"> 
      <span><i class="fa fa-chevron-right"></i></span> 
     </a> 
    </li> 
</ul> 

を、私は最後のページによ、そう「次ページ」ボタンが自動的に非表示になります。 最後に表示された項目（6ページ）に丸みのある枠が必要です。 HTMLを変更せずにcss/scssで 'page 6'を選択するにはどうすればよいですか？ は、私はこのような何かについて考えた：

.pagination > li:not(+ li.hide) > a, 
.pagination > li:not(+ li.hide) > span { 
    border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 

しかし、これは動作しません。 明確にする：.hideの前に、.activeクラスに依存しないアイテムを選択したいと思います。

Answer 1

セレクタ:nth-last-child()セレクタを使用すると、アイテムのリストの最後から開始し、最後に2番目から最後のアイテムを選択できます。ここには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=""> 
 
     <a href="/en/products/page1">1</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page2">2</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page3">3</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page4">4</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page5">5</a> 
 
    </li> 
 
    <li class="active"> 
 
     <a href="/en/products/page6">6</a> 
 
    </li> 
 
    <li class="hide"> 
 
     <a href="/en/products/page7"> 
 
      <span><i class="fa fa-chevron-right"></i></span> 
 
     </a> 
 
    </li> 
 
</ul>

Answer 2

私はあなただけでは、CSSでこれを実現することができるとは思いません。

私はあなたの質問にjavascriptやjqueryでタグを付けていないことを知っていますが、ここではCSSとjQueryを使用して解決することができます。

簡略化のため、borderの代わりにcolorプロパティを使用しました。 CSSの

$('.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=""> 
 
     <a href="/en/products/page1">1</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page2">2</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page3">3</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page4">4</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page5">5</a> 
 
    </li> 
 
    <li class="active"> 
 
     <a href="/en/products/page6">6</a> 
 
    </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=""> 
 
     <a href="/en/products/page1">1</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page2">2</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page3">3</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page4">4</a> 
 
    </li> 
 
    <li class=""> 
 
     <a href="/en/products/page5">5</a> 
 
    </li> 
 
    <li class="active"> 
 
     <a href="/en/products/page6">6</a> 
 
    </li> 
 
    
 
</ul>