Le bloc-notes professionnel d'un développeur front-end senior
Source: https://www.lottejackson.com/learning/nth-child-cicada-principle. Version PDF de l’article.
|
1 2 3 4 5 |
.Item:nth-child(2n+1) .Item-image {…} .Item:nth-child(3n+2) .Item-image {…} .Item:nth-child(5n+3) .Item-image {…} .Item:nth-child(7n+5) .Item-image {…} .Item:nth-child(11n+7) .Item-image {…} |
Source : Demo jsFiddle.net.
.myClass:nth-last-child(-n+4){} nous donne en jQuery :
|
1 2 |
var myVariable = 4; $('.myClass:nth-last-child(-n+'+myVariable+')').doSomething(); |
|
1 2 3 4 |
(function(){ var getColumnsCount = $('.container').attr('data-columns'); $('.list .item:nth-last-child(-n+'+getColumnsCount+')').addClass('emphasis'); })(); |
Source : Styling elements based on sibling count
Deux possibilités (sachant que dans certains cas l’une conviendra mieux que l’autre) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* one item */ li:nth-child(1):nth-last-child(1) { width: 100%; } /* two items */ li:nth-child(1):nth-last-child(2), li:nth-child(2):nth-last-child(1) { width: 50%; } /* three items */ li:nth-child(1):nth-last-child(3), li:nth-child(2):nth-last-child(2), li:nth-child(3):nth-last-child(1) { width: 33.3333%; } /* four items */ li:nth-child(1):nth-last-child(4), li:nth-child(2):nth-last-child(3), li:nth-child(3):nth-last-child(2), li:nth-child(4):nth-last-child(1) { width: 25%; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* one item */ li:first-child:nth-last-child(1) { width: 100%; } /* two items */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; } /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } /* four items */ li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { width: 25%; } |
Autre solution, mieux écrite, exploitant la propriété CSS box-sizing: border-box; : http://jsfiddle.net/frontenddeveloper/795Cc/4/.
Sources :
Prise en charge : IE9+ (IE8+ sans l’utilisation de la fonction calc pour pallier à un bug de largeur sur le dernier élément de la liste).
<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
<li><a class="link" href="#">01</a></li>
<li><a class="link" href="#">02</a></li>
<li>03</li>
<li>04</li>
<li><a class="link" href="#">05</a></li>
<li><a class="link" href="#">06</a></li>
<li class="current"><strong>07</strong></li>
<li><a class="link" href="#">08</a></li>
<li><a class="link" href="#">09</a></li>
<li><a class="link" href="#">10</a></li>
<li><a class="link" href="#">11</a></li>
<!--li><a class="link" href="#">12</a></li-->
</ul>
.sizes-list{
width: 100%;
float: left;
margin-bottom: 16px;
}
.sizes-list li{
float: left;
text-align: center;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
clear: left;
}
/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
clear: none;
}
.sizes-list li{
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 0;
border-style: solid;
border-color: #e5e5e5;
}
.sizes-list li{
width: 20%;
}
.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
width: calc(20% + 3px);
border-color: red;
}
.sizes-list li:nth-child(5n+5):last-child{
width: 20%;
border-color: olive;
}
.sizes-list.four-columns-rows li{
width: 25%;
}
.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
width: calc(25% + 3px);
border-color: red;
}
.sizes-list.four-columns-rows li:nth-child(4n+4):last-child{
width: 25%;
border-color: olive;
}
/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
margin-top: -3px;
}
.sizes-list,
.sizes-list a.link{
color: #50494c;
text-decoration: none;
}
.sizes-list li.current{
background-color: #e5e5e5;
}
/*
.sizes-list a.link,
.sizes-list strong{
display: block;
padding: 8px 0;
}
*/
.sizes-list li:last-child,
.sizes-list li:nth-child(5n+5),
.sizes-list.four-columns-rows li:nth-child(4n+4),
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child{
border-right-width: 3px;
}
.sizes-list.four-columns-rows li:nth-child(5n+5){
border-right-width: 0;
}
Test en live : http://jsfiddle.net/frontenddeveloper/As8BQ/.
La liste comportera des cellules à largeurs flexibles (déclarées en pourcentages (%)). Le tableau affiche par défaut 5 colonnes. L’ajout de la classe .four-columns-rows affichera un tableau de 4 colonnes.
<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><strong></strong></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
</ul>
.sizes-list{
width: 100%;
float: left;
margin-bottom: 16px;
}
.sizes-list li{
float: left;
text-align: center;
}
/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
clear: left;
}
/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
clear: none;
}
.sizes-list li{
width: 20%;
}
/* [standard 5 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 6ème élément inclus */
.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
width: 20.97%;
}
/* [4 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li,
.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
width: 25%;
}
/* [4 colonnes] Si le dernier élément de la liste est l'un des 3 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li:nth-child(-n+3):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
width: 25.97%;
}
/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
margin-top: -3px;
}
.sizes-list a.link,
.sizes-list strong{
display: block;
padding: 8px 0;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 0;
border-style: solid;
border-color: #e5e5e5;
}
.sizes-list,
.sizes-list a.link{
color: #50494c;
text-decoration: none;
}
.sizes-list strong{
background-color: #e5e5e5;
}
/*
.sizes-list li:nth-child(5n+1) a.link,
.sizes-list li:nth-child(5n+1) strong,
.sizes-list.four-columns-rows li:nth-child(4n+1) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+1) strong{
border-left-width: 3px;
}
*/
.sizes-list li:last-child a.link,
.sizes-list li:last-child strong,
.sizes-list li:nth-child(5n+5) a.link,
.sizes-list li:nth-child(5n+5) strong,
.sizes-list.four-columns-rows li:nth-child(4n+4) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+4) strong,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child strong{
border-right-width: 3px;
}
.sizes-list.four-columns-rows li:nth-child(5n+5) a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5) strong{
border-right-width: 0;
}