CSS Super Advanced Nth-Kind Selektor?

Question

Ich arbeite gerade an einer Fotogalerie mit Seitenumbruch. Es zeigt das Hauptbild und auch eine Liste von Thumbnails, so etwas wie dieses:

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

Bitte beachten Sie die Zahlen in der Thumbnail-Container sind eine Nummer, die jedem Bild zugeordnet, nicht die tatsächliche Position in dem Behälter.

Die Thumbnails Ich habe sie in einem Listencontainer, so dass sie mit ul > li Selektoren ausgerichtet sind.

Also, mein Problem ist, dass ich verschiedene Ränder auf die Listenelemente enthält, meine Bilder in Abhängigkeit von der Position in ihrem Behälter, zum Beispiel geben müssen:

margin-left: 0px für Bilder 1, 6 und 11

margin-right: 0px für Bilder 5, 10 und die > Zeichen an Position 15

Also, ich bin in der Lage ist Teil zu tun, was ich brauche, unter Verwendung von: n-te-Kind-Selektor, so etwas wie diese:

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

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

Das Problem kommt, wenn ich auf die nächste Seite der Thumbnails gehe, meine < und > Links muss ich sie von Seite 1 auf Seite 2 verschieben, und dann alle Thumbnails auf Seite 1 ausblenden, um die auf Seite 2 zu zeigen, so dass die Wähler nicht mehr gelten ... es ist kompliziert, so dass es besser ist, zu zeigen, was Seite 2 würde wie folgt aussehen:

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

so, jetzt meine Wähler wird nicht funktionieren, statt die Anwendung auf die Bilder 15, 20 und 25 für den linken Rand und 21, 26 und die > Link für den rechten Rand, gelten sie für 14, 19, 24 für einen Rand, und 18, 23 und > Link für den anderen.

Meine erste Annäherung war, nur die sichtbaren Einzelteile zu zielen, aber das kann nicht über CSS getan werden, und ich will wirklich nicht die jQuery Straße gehen, wenn absolut notwendig - das Layout sollte über CSS allein erfolgen, richtig ?

Also, da ist es, das ist, was ich nicht herausfinden kann.

Eine Idee, die ich hatte war 5n + 1 und 5n + 5 in Bereichen von 13 Elementen auf einmal zielen, und dann zielen auf meine Paginierung Links getrennt, aber ich kann nicht die Art und Weise zu tun, hier ist was ich bisher versucht:

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

ich meine Idee erraten von Artikeln jedes fünftes Elements werden kann beginnen als „Ziel 1 erklärt, und dann beginnt jedes fünfte Element aus Artikel 5, und die gleiche Berechnung in den Bereichen von 13 Artikeln wiederholen (1-13, 14-26, 27-39 usw.) "

Wer weiß, wie ich das erreichen kann?

Dank

** mit der Lösung AKTUALISIERT **

Dank mir @Dekel in der richtigen Richtung für den Hinweis.

Hier ist das letzte CSS Früher habe ich es

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; 
} 

Arbeit zu machen und hier ist ein funktionstüchtiges Beispiel der Sache wie erwartet:

Auf codepen: https://codepen.io/andruxnet/pen/ozvEBW?editors=1111

Und hier:

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>

Hier

Answer 1

ist eine Lösung mit reinem CSS, mit :nth-child

Jeder „Block“ von li Elemente Sie haben 13 Elemente enthält, so können Sie die 13n+X im :nth-child Selektor verwenden.
Nun, was Sie tun müssen, ist die Anzahl der li Elemente von der 13n Sie haben, subtrahieren. Der erste wird 13n-12 sein (um 1 zu bekommen), der zweite wird 13n-7 sein (um 6 zu bekommen) und der letzte wird 13n-2 sein (um 11 zu bekommen).

Hier ist die Arbeitsversion:

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>