Chọn một nửa các phần tử với: nth-child?

Question

Lấy mã sau ví dụ:

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

Có thể, sử dụng :nth-child() hay cách khác, để chọn chính xác nửa tổng yếu tố? Mã nên chọn số đầu tiên/cuối cùngli s trong trường hợp trên, sau đó nếu tôi tăng số lượng li s lên sáu, nó sẽ chọn/ba số đầu tiên/cuối cùng.

tôi cảm thấy tôi sẽ phải sử dụng JavaScript ...

Answer 1

Cách duy nhất bạn muốn có thể nhận được bất cứ nơi nào gần đó trong CSS tinh khiết là để làm một chọn ở hai nth-child(odd) hoặc nth-child(even). Nếu bạn muốn chính xác nửa cuối (và không phải là lẻ hoặc thậm chí), thì bạn phải sử dụng JavaScript/jQuery.

Sử dụng jQuery, bạn có thể nhận được chúng sử dụng:

var yourList = $("ul li"); 

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

Answer 2

Ví dụ: http://jsfiddle.net/LZwBe/

Tạo một lớp css với phong cách đối với những yếu tố:

li.first { 
    background: red; 
} 

Sử dụng jQuery để thêm lớp đó đến nửa phần đầu của các yếu tố:

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

Answer 3

Bạn có thể chọn một nửa các thành phần trong CSS tinh khiết ... tối đa một điểm.
Hạn chế duy nhất là bạn đã biết số lượng tối đa của tổng số mục. Có thể là 150 nhưng sau đó nó sẽ không làm việc với 151.

Dưới đây là một bản demo: http://jsfiddle.net/tcK3F/ (*)

CSS tối thiểu:

/* 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; 
} 

Dựa trên ý tưởng từ:
Bí quyết là từ André Luís và nhìn thấy trong một bài đăng từ Lea Verou: Styling elements based on sibling count. Tôi thích nghi nó với nhu cầu của bạn của một lựa chọn chia.

Giải thích nhanh:
:nth-last-child(-n+3) sẽ chọn 3 last các mục từ cha mẹ; :nth-child(n+3) sẽ chọn tất cả các mục ngoại trừ các mục đầu tiên. Kết hợp chúng và bạn có thể chọn các thành phần trong CSS thuần túy dựa trên những gì theo chúng (hoặc có bao nhiêu trẻ em trong một phụ huynh). Ngoại trừ bạn sẽ phải kết hợp 75 trong số đó với 74 dấu phẩy nếu bạn muốn mẹo này hoạt động với 150 phần tử ...:)

Compatibility là IE9 + (polyfills JS tồn tại)

(*)
phần đầu của HTML: ngay cả số hạng mục danh sách;
phần thứ hai: số lẻ các mục danh sách

Quy tắc CSS đầu tiên: sẽ chọn N cuối cùng từ 2N mục hoặc N + 1/2 mục cuối cùng từ 2N + 1 và tạo kiểu chúng màu trắng trên xanh (ví dụ: 3 mục tổng cộng 5 hoặc 6).
quy tắc CSS thứ hai: sẽ chọn N cuối cùng từ 2N mục hoặc N-1/2 mục cuối cùng từ 2N + 1 và tạo kiểu cho đường viền màu đỏ và in nghiêng (ví dụ: 2 mục trong tổng số 4 hoặc 5)