CSS cuối cùng con (-1)

Question

Tôi đang tìm một bộ chọn css cho phép tôi chọn con trước của danh sách.

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> <!-- select the pre last item dynamically no matter how long this list is --> 
    <li>6</li> 
</ul> 

phương pháp tĩnh:

ul li:nth-child(5) 

động phương pháp:

ul li:last-child(-1) 

trong đó tất nhiên không xác nhận, cũng thứ n-cuối con dường như không cung cấp một cách năng động .. Tôi có thể dự phòng javascript nhưng tôi tự hỏi nếu có một cách css tôi bỏ qua

Answer 1

Bạn có thể sử dụng :nth-last-child(); trên thực tế, bên cạnh :nth-last-of-type() Tôi không biết những gì khác bạn có thể sử dụng. Tôi không chắc chắn ý bạn là gì bởi "năng động", nhưng nếu bạn muốn nói liệu phong cách có áp dụng cho đứa trẻ thứ hai mới khi nhiều trẻ em được thêm vào danh sách hay không, đúng vậy. Interactive fiddle.

ul li:nth-last-child(2) 

Answer 2

Trừ khi bạn có thể lấy PHP để gắn nhãn thành phần đó với lớp học, bạn nên sử dụng jQuery.

jQuery(document).ready(function() { 
    $count = jQuery("ul li").size() - 1; 
    alert($count); 
    jQuery("ul li:nth-child("+$count+")").css("color","red"); 
});