cssで要素の数が奇数のとき、最初の要素、もしくは最後の要素を指定する

「:nth-child(2n+1):first-child」これで最初の要素
「:nth-child(2n+1):last-child」これで最後の要素

2n+1というのは、nに0から順に数字を入れてもらうとわかるように、
1、3、5、7...という奇数になります。
これに対し、最初の要素「first-child」、もしくは最後の要素「first-child」を指定しています。

ただ、最後の要素は奇数のみ表示を変更できますが、
最初の要素はずっと1が存在してるので、この書き方だと要素の数によって見た目を変える事ができないです。

なにかいい書き方があれば教えてもらえるとうれしいです。


追記：2017.12.07
NxWorldというブログを運営している
naoyaさんに教えていただいたのですが、
「:nth-last-child(2n+1):first-child」と書けば、実現できました...！すごい..！







サンプル

See the Pen cssで要素の数が奇数のとき、最初の要素を指定する by takapen (@takapen) on CodePen.

HTML

  
1
  
2
  
3



  
1
  
2
  
3
  
4



  
1
  
2
  
3



  
1
  
2
  
3
  
4



  
1
  
2
  
3



  
1
  
2
  
3
  
4

CSS

ul {
  width: 50%;
}
li {
  list-style: none;
  float: left;
  width: 48%;
  margin: 1%;
  padding: 10px;
  background: #ccc;
  box-sizing: border-box;
}
.first:nth-child(2n+1):first-child {
  width: 98%;
  background: #777;
}
.first-new:nth-last-child(2n+1):first-child {
  width: 98%;
  background: #777;
}
.last:nth-child(2n+1):last-child {
  width: 98%;
  background: #777;
}