CSS Đầu tiên trẻ em khi 7 trở lên trẻ em

Question

Vì vậy, tôi có truy vấn này để có được những last-child khi có 7 hoặc nhiều yếu tố

li:nth-last-child(7) ~ li:last-child { 
    background: red; 
} 

này làm việc cho bất kỳ số lượng các yếu tố như miễn là có tối thiểu là 7 . Những gì tôi muốn làm là ngược lại, nhận được first-child.

Tôi đã thử các sau

li:nth-last-child(7) ~ li:first-child { 
    background: red; 
} 

Nhưng điều đó không làm việc. Kỳ lạ là tôi có thể lấy phần tử con thứ hai bằng cách sử dụng sau

li:nth-last-child(7) ~ li:nth-child(2) { 
    background: red; 
} 

Tôi biết đây là CSS khá phức tạp, và thậm chí không thể, nhưng tôi tự hỏi nếu nó có thể được thực hiện. Tôi không muốn sử dụng JS nếu có thể. Tôi đoán đây là một thách thức;)

Answer 1

Bạn có thể chọn phần tử đầu tiên khi có 7 hoặc nhiều yếu tố bằng cách sử dụng trình chọn bên dưới:

div:first-child:nth-last-child(n+7) { 
    color: red; 
} 

Giải thích:

• nth-last-child(n+7) - Sẽ chọn tất cả nhưng bảy yếu tố con cuối cùng. Khi có ít hơn bảy trẻ em, điều này sẽ không phù hợp.
• :first-child:nth-last-child(n+7) - Sẽ chỉ chọn những yếu tố đó cũng chính là đứa con đầu lòng trong những yếu tố đó phù hợp với một phần khác (đó là, chỉ chọn đứa con đầu lòng khi có bảy hoặc nhiều trẻ em)

.container > div:first-child:nth-last-child(n+7) { 
 
    color: red; 
 
}

<h3>Has seven children</h3> 
 
<div class='container'> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div> 
 

 
<h3>Has six children</h3> 
 
<div class='container'> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div> 
 

 
<h3>Has nine children</h3> 
 
<div class='container'> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div>

Fiddle Demo (Đối với một số lý do nó không hoạt động với n+7 trong đoạn)

Answer 2

cho phần tử đầu tiên bạn có thể sử dụng loại đầu tiên trong css của mình. Ví dụ:

p:first-of-type { 
     background: #ff0000; 
    }