要素の半分を選択すると：nth-​​child？

Question

は、例えば次のコードを取る：

<ul> 
    <li>Hello World</li> 
    <li>Hello World</li> 
    <li>Hello World</li> 
    <li>Hello World</li> 
</ul> 

それはまさに半分全元素のを選択するために:nth-child()またはその他を使用して、可能ですか？上記の例では、最初の/最後のの2つをliと選択する必要があります。liの数を6に増やす場合は、最初の/最後の3を選択します。です。私はJavaScriptを使用しているつもりだと感じ

...

Answer 1

あなたは純粋なCSSのものに近くのどこを取得することができるだろう唯一の方法は、いずれかのnth-child(odd)または上のセレクターを行うことですnth-child(even)。最後の半分（奇数または偶数ではない）が正確に必要な場合は、JavaScript/jQueryを使用する必要があります。 jQueryのを使用して

、あなたはそれらを使用して取得できます。

var yourList = $("ul li"); 

yourList = yourList.slice(0, Math.floor(yourList.length/2)); 

Answer 2

例：http://jsfiddle.net/LZwBe/

は、それらの要素のスタイルとCSSクラスを作成します。

li.first { 
    background: red; 
} 

は、そのクラスを追加するためのjQueryを使用して、要素の前半まで：

$(document).ready(function() { 
    var lis = $('ul li'); 
    $(lis).each(function(i) { 
     if(i < lis.length/2) 
      $(this).addClass('first'); 
    }); 
}); 

Answer 3

の純粋なCSS ...の要素の半分を選択することができます。
唯一の欠点は、合計アイテムの最大数を知っていることです。 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; 
} 

から：トリックはあり
150だろうが、それは、その後151

では動作しません。ここのデモですアンドレ・ルイスとLea Verouの投稿で見た：Styling elements based on sibling count。私はあなたの分割選択の必要性に適応しました。

クイック説明：
:nth-last-child(-n+3)親から3つの最後項目を選択します。 :nth-child(n+3)は、最初の 3個以外のすべての商品をで選択します。それらを結合して、純粋なCSSの要素を、それに続くもの（または親にいくつの子供がいるか）に基づいて選択することができます。あなたは150の要素で動作するようにこのトリックをしたい場合は、74のコンマとそれらの75を組み合わせる必要があります...:)

互換性IE9 +（JSのpolyfillsが存在する）

（*）HTMLコードの
最初の部分である：リスト項目の偶数。
第二部：リスト項目の奇数

第CSSルール：2Nの項目から最後のNを選択するか、最後のN + 1/2商品2N + 1から、および青色に白でそれらのスタイルであろう（例：3つのアイテム合計5または6）。
第CSSルール：2N + 1から2Nのアイテムまたは最後のN-1/2項目から最後のNを選択し、赤い境界線とイタリックでそれらのスタイル（例：4の合計で2つのアイテムまたは5）であろう