純粋なCSSの要素の半分を選択できます...ある程度まで。
唯一の欠点は、アイテムの総数の最大数を知っている必要があることです。150になる可能性がありますが、151では機能しません。
デモは次のとおりです:http://jsfiddle.net/tcK3F/(*)
最小限のCSS:
/* selecting half or more items. Up to 6 */
li:first-child:last-child,
li:nth-child(n+2):nth-last-child(-n+2),
li:nth-child(n+3):nth-last-child(-n+3),
li:nth-child(n+4):nth-last-child(-n+4),
li:nth-child(n+5):nth-last-child(-n+5),
li:nth-child(n+6):nth-last-child(-n+6) {
color: white;
background: darkblue;
}
/* selecting half or less items. Up to 6 */
li:nth-child(n+2):last-child,
li:nth-child(n+3):nth-last-child(-n+2),
li:nth-child(n+4):nth-last-child(-n+3),
li:nth-child(n+5):nth-last-child(-n+4),
li:nth-child(n+6):nth-last-child(-n+5),
li:nth-child(n+7):nth-last-child(-n+6){
font-style: italic;
border: 2px solid red;
}
からのアイデアに基づく:
トリックはAndréLuísからのものであり、Lea Verouからの投稿で見られます:兄弟の数に基づくスタイリング要素。分割選択のニーズに合わせて調整しました。
簡単な説明:親から最後
:nth-last-child(-n+3)
の3つのアイテムを選択します。最初の3つを除くすべてのアイテムを選択します。それらを組み合わせると、それらに続くもの(または親に含まれる子の数)に基づいて、純粋なCSSの要素を選択できます。このトリックを150の要素で機能させる場合は、75個と74個のコンマを組み合わせる必要があることを除いて... :):nth-child(n+3)
互換性はIE9+です(JSポリフィルが存在します)
(*)
HTMLコードの最初の部分:偶数のリスト項目。
2番目の部分:奇数のリストアイテム
最初のCSSルール:2Nアイテムから最後のNを選択するか、2N +1から最後のN+1/2アイテムを選択し、青地に白でスタイルを設定します(例:合計5または6の3アイテム)。
2番目のCSSルール:2Nアイテムから最後のNを選択するか、2N+1から最後のN-1/2アイテムを選択し、赤い境界線と斜体でスタイルを設定します(例:合計4または5の2アイテム)