14

たとえば、次のコードを考えてみましょう。

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

使用するかどうかにかかわらず、要素全体の:nth-child()ちょうど半分を選択することは可能ですか？上記の例では、コードは最初/最後の2つ liを選択する必要があります。次に、sの数を6に増やすとli、最初/最後の3つが選択されます。

JavaScriptを使わないといけないと思います...

4

3 に答える 3

17

純粋な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アイテム）

于 2013-03-17T23:52:45.943 に答える
5

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

jQueryを使用すると、次を使用してそれらを取得できます。

var yourList = $("ul li");

yourList = yourList.slice(0, Math.floor(yourList.length/2));
于 2013-03-17T22:19:11.073 に答える
2

例

これらの要素のスタイルを使用してCSSクラスを作成します。

.half {
    background-color: #18D;
}

次に、jQueryを使用して、そのクラスを指定された要素のセットに追加します。

$(function () {
  var $lis = $('ul li')
  var length = $lis.length

  // Add class to first half:
  $lis.slice(0, Math.floor(length / 2)).addClass('first')

  // Add class to last half:
  $lis.slice(length - Math.floor(length / 2)).addClass('first')
})

要素の数が奇数の場合に要素を中央に含めたい場合は、に変更Math.floorしMath.ceilます。すべての可能性は例で見ることができます。

于 2013-03-17T22:22:41.137 に答える