CSSの高度なnth-childセレクタ？

Question

私は現在、ページ区切りの写真ギャラリーで作業しています。これは、メイン画像ともサムネイルの一覧、このようなものを示しています

+----------------------+----+----+----+---+----+ 
|      | 1 | 2 | 3 | 4 | 5 | 
+      +----+----+----+---+----+ 
|  MAIN IMAGE  | 6 | 7 | 8 | 9 | 10 | 
+      +----+----+----+---+----+ 
|      | 11 | 12 | 13 | < | > | 
+----------------------+----+----+----+---+----+ 

サムネイルコンテナ内の数字は各画像に割り当てられた番号、NOTコンテナ内の実際の位置ですのでご注意ください。

サムネイルが、私は、リストコンテナ内でそれらを持っているので、彼らはul > liセレクタを使用してターゲットとしています。

だから、私の問題は、私は、たとえば、そのコンテナ内の位置に応じて、私の画像を含むリストアイテムに異なる余白を与える必要があるということです：画像1、6

margin-left: 0px、および11

だから、

画像についてmargin-right: 0px 5、10および15位

で>文字、私が使用して、私は必要なものの一部を行うことができるよ：n番目の子セレクタを、このような何かを：

ul li:nth-child(5n+1) { 
    margin-left: 0; 
} 

ul li:nth-child(5n+5) { 
    margin-right: 0; 
} 

<と>のサムネイルの次のページに移動すると問題が発生します。ページ1からページ2に移動し、ページ1のすべてのサムネイルを非表示にする必要があります。ページ2、代わりに、画像15、20とに適用するので、

+----------------------+----+----+----+----+----+ 
|      | 14 | 15 | 16 | 17 | 18 | 
+      +----+----+----+----+----+ 
|  MAIN IMAGE  | 19 | 20 | 21 | 22 | 23 | 
+      +----+----+----+----+----+ 
|      | 24 | 25 | 26 | < | > | 
+----------------------+----+----+----+----+----+ 

だから、今、私のセレクタは動作しません：そうセレクタは適用されません...それはそれは表示するために、より良いですので、どのページ2のようになり、複雑です左余白25及び21、26及び右マージン>リンクは、それらは、一のマージン14、19、24、18、23に適用され、他のため>リンク。

私の最初のアプローチは、目に見えるアイテムのみを対象としていましたが、CSSで行うことはできません。本当に必要な場合を除いて、jQueryの道に行きたくはありません。レイアウトはCSSだけで、 ？

だから、そこにそれはそれは私が把握することはできません何、です。

私が持っていたアイデアは、一度に13項目の範囲で5n + 1と5n + 5をターゲットにしてから別にページ分割リンクをターゲットにすることでしたが、私はそれを行う方法を見つけることができません。これまでに試した：

:nth-child(13n):nth-child(5n+1) 
:nth-child(13n+1):nth-child(5n+1) 
:nth-child(5n+1):nth-child(13n+1) 

は、私は（私の考えは「項目1から始まるすべての5番目の項目を対象とした後、すべての5番目の項目は、項目5から始めて、13の項目の範囲で同じ計算を繰り返すように説明することができますね「

誰もが、私はそれを達成することができます方法を知っている1-13、14-26、27-39、など）？

おかげ

** SOLUTIONで更新**正しい方向に私を指しているため@Dekelへ

感謝。

codepenの場合：ここで

は、私はそれが

ul li:not(.psr_paging):nth-child(13n-12), 
ul li:not(.psr_paging):nth-child(13n-7), 
ul li:not(.psr_paging):nth-child(13n-2) { 
    border-color: cyan; 
    margin-left: 0; 
} 

ul li:not(.psr_paging):nth-child(13n-8), 
ul li:not(.psr_paging):nth-child(13n-3) { 
    border-color: blue; 
    margin-right: 0; 
} 

#pager-next { 
    margin-right: 0; 
} 

を動作させるために使用され、ここで期待どおりに動作し事のワーキングサンプルの最終CSSですhttps://codepen.io/andruxnet/pen/ozvEBW?editors=1111

そして、ここで：

var page = 0; 
 
var numThumbs = 13; 
 
var paging = [ 
 
    {'start': 1, 'end': 13}, 
 
    {'start': 14, 'end': 26}, 
 
    {'start': 27, 'end': 39} 
 
]; 
 

 
function refreshThumbs() { 
 
    var startIndex = paging[ page ].start - 1; 
 
    var stopIndex = paging[ page ].end - 1; 
 

 
    // Show/Hide thumbs 
 
    var $thumbsUl = $('ul.thumbs'); 
 
    $thumbsUl.find('li:not(.psr_paging)').each(function(i) { 
 
    var $li = $(this); 
 
    if (i >= startIndex && i <= stopIndex) { 
 
     $li.show(); 
 
    } 
 
    else { 
 
     $li.hide(); 
 
    } 
 
    }); 
 
    $('#pager-prev').insertAfter($('ul.thumbs').find('li:visible:not(.psr_paging):last')); 
 
    $('#pager-next').insertAfter($('#pager-prev')); 
 
} 
 

 
$('#pager-next').on('click', function() { 
 
    if (page < 2) { 
 
    page++; 
 
    refreshThumbs(); 
 
    } 
 
}); 
 

 
$('#pager-prev').on('click', function() { 
 
    if (page > 0) { 
 
    page--; 
 
    refreshThumbs(); 
 
    } 
 
});

.thumbs-wrap { 
 
    width: 460px; 
 
    height: 360px; 
 
    display: block; 
 
    background-color: black; 
 
    padding: 10px; 
 
} 
 

 
.thumbs-wrap ul.thumbs { 
 
    display: block; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.thumbs-wrap ul.thumbs li { 
 
    width: 18%; 
 
    height: 74px; 
 
    margin: 5px; 
 
    float: left; 
 
    overflow: hidden; 
 
    border: 5px solid #ffffff; 
 
    font-size: 30px; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    padding-top: 10px; 
 
} 
 

 
.thumbs-wrap li.thumb-blank { 
 
    background-color: red; 
 
} 
 

 
.thumbs-wrap li.psr_paging a { 
 
    font-size: 30px; 
 
    text-align: center; 
 
    color: #ffffff; 
 
    margin: 0 auto; 
 
} 
 

 
.thumbs-wrap li.psr_paging a:hover { 
 
    text-decoration: none; 
 
} 
 

 
ul li:not(.psr_paging):nth-child(13n-12), 
 
ul li:not(.psr_paging):nth-child(13n-7), 
 
ul li:not(.psr_paging):nth-child(13n-2) { 
 
    border-color: cyan; 
 
    margin-left: 0; 
 
} 
 

 
ul li:not(.psr_paging):nth-child(13n-8), 
 
ul li:not(.psr_paging):nth-child(13n-3) { 
 
    border-color: blue; 
 
    margin-right: 0; 
 
} 
 

 
#pager-next { 
 
    margin-right: 0; 
 
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="thumbs-wrap"> 
 
    <ul class="thumbs"> 
 
    <li class="thumb-blank">1</li> 
 
    <li class="thumb-blank">2</li> 
 
    <li class="thumb-blank">3</li> 
 
    <li class="thumb-blank">4</li> 
 
    <li class="thumb-blank">5</li> 
 
    <li class="thumb-blank">6</li> 
 
    <li class="thumb-blank">7</li> 
 
    <li class="thumb-blank">8</li> 
 
    <li class="thumb-blank">9</li> 
 
    <li class="thumb-blank">10</li> 
 
    <li class="thumb-blank">11</li> 
 
    <li class="thumb-blank">12</li> 
 
    <li class="thumb-blank">13</li> 
 
    <li id="pager-prev" class="psr_paging"> 
 
     <a class="thumb pageLink prev" href="javascript:void(0);"> 
 
     <span class="glyphicon glyphicon-menu-left"></span> 
 
     </a> 
 
    </li> 
 
    <li id="pager-next" class="psr_paging"> 
 
     <a class="thumb pageLink next" href="javascript:void(0);"> 
 
     <span class="glyphicon glyphicon-menu-right"></span> 
 
     </a> 
 
    </li> 
 
    <li class="thumb-blank" style="display: none;">14</li> 
 
    <li class="thumb-blank" style="display: none;">15</li> 
 
    <li class="thumb-blank" style="display: none;">16</li> 
 
    <li class="thumb-blank" style="display: none;">17</li> 
 
    <li class="thumb-blank" style="display: none;">18</li> 
 
    <li class="thumb-blank" style="display: none;">19</li> 
 
    <li class="thumb-blank" style="display: none;">20</li> 
 
    <li class="thumb-blank" style="display: none;">21</li> 
 
    <li class="thumb-blank" style="display: none;">22</li> 
 
    <li class="thumb-blank" style="display: none;">23</li> 
 
    <li class="thumb-blank" style="display: none;">24</li> 
 
    <li class="thumb-blank" style="display: none;">25</li> 
 
    <li class="thumb-blank" style="display: none;">26</li> 
 
    <li class="thumb-blank" style="display: none;">27</li> 
 
    <li class="thumb-blank" style="display: none;">28</li> 
 
    <li class="thumb-blank" style="display: none;">29</li> 
 
    <li class="thumb-blank" style="display: none;">30</li> 
 
    <li class="thumb-blank" style="display: none;">31</li> 
 
    <li class="thumb-blank" style="display: none;">32</li> 
 
    <li class="thumb-blank" style="display: none;">33</li> 
 
    <li class="thumb-blank" style="display: none;">34</li> 
 
    <li class="thumb-blank" style="display: none;">35</li> 
 
    <li class="thumb-blank" style="display: none;">36</li> 
 
    <li class="thumb-blank" style="display: none;">37</li> 
 
    <li class="thumb-blank" style="display: none;">38</li> 
 
    <li class="thumb-blank" style="display: none;">39</li> 
 
    </ul> 
 
</div>

ここ

Answer 1

は、あなたが持っているli要素の各「ブロック」は13個の要素が含まれているので、あなたは:nth-childセレクタに13n+Xを使用することができます:nth-child

を使用して、純粋なCSSでのソリューションです。
あなたがしなければならないことは、得られた13nからli要素の数を減算することです。最初は13n-12（1を得る）、2番目は13n-7（6を得る）、最後は13n-2（11を得る）になります。

ul { 
 
    width: 115px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 20px; 
 
    height: 20px; 
 
    float: left; 
 
    border: 1px solid black; 
 
    list-style: none; 
 
} 
 
ul li:nth-child(13n-12), 
 
ul li:nth-child(13n-7), 
 
ul li:nth-child(13n-2) { 
 
    background: red; 
 
}

<ul> 
 
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li> 
 
    <li style="clear: left">14</li><li>15</li><li>16</li><li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> 
 
    <li style="clear: left">27</li> <li>28</li> <li>29</li> <li>30</li> <li>31</li> <li>32</li> <li>33</li> <li>34</li> <li>35</li> <li>36</li> <li>37</li> <li>38</li> <li>39</li> 
 
</ul>