CSS檢測因子的兄弟姐妹

Question

所以我已經能夠detect the number of siblings an element has by using nth-child()，但我還沒有能夠找出一種方法來選擇僅基於兄弟姐妹的總數的最後幾個元素。

在下面的代碼片段中，我通過添加類實現了我想要的目標。但是，如果可能的話，我想通過CSS選擇器來實現這一點。在下面的代碼片段中，每個「組」有2行，一行被定義爲3個元素。我想選擇下面代碼片段中看到的橙色元素而不添加類。選擇最後一行中的元素或選擇除最後一行之外的所有元素。

ul { 
 
    padding-left: 0; 
 
} 
 

 
ul::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
li { 
 
    background-color: #efefef; 
 
    border: 1px dotted #000; 
 
    box-sizing: content-box; 
 
    float: left; 
 
    list-style-type: none; 
 
    padding: 10px 0; 
 
    text-align: center; 
 
    width: 33% 
 
} 
 

 
.alt { 
 
    background-color: orange; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li class="alt">4</li> 
 
</ul> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li class="alt">4</li> 
 
    <li class="alt">5</li> 
 
</ul> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li class="alt">4</li> 
 
    <li class="alt">5</li> 
 
    <li class="alt">6</li> 
 
</ul>

Answer 1

nth-last-child由於可以採取一個公式，可以爲任意數量的使用相同的技術在你所引用的其他問題元素的做到這一點。

ul { 
 
    padding-left: 0; 
 
} 
 

 
ul::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
li { 
 
    background-color: #efefef; 
 
    border: 1px dotted #000; 
 
    box-sizing: content-box; 
 
    float: left; 
 
    list-style-type: none; 
 
    padding: 10px 0; 
 
    text-align: center; 
 
    width: 33% 
 
} 
 

 
/* 3 elements in last row */ 
 
li:first-child:nth-last-child(3n+0) ~ li:nth-last-child(1), 
 
li:first-child:nth-last-child(3n+0) ~ li:nth-last-child(2), 
 
li:first-child:nth-last-child(3n+0) ~ li:nth-last-child(3), 
 

 
/* 2 elements in last row */ 
 
li:first-child:nth-last-child(3n+2) ~ li:nth-last-child(1), 
 
li:first-child:nth-last-child(3n+2) ~ li:nth-last-child(2), 
 

 
/* 1 element in last row */ 
 
li:first-child:nth-last-child(3n+1) ~ li:nth-last-child(1) { 
 
    background-color: orange; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
</ul> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
</ul> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
</ul> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
    <li>13</li> 
 
</ul>

---

表達li:first-child:nth-last-child(3)需要li這既是其父和也從最後一個子第三的first-child。這兩個約束條件意味着父元素必須只有3個子元素。以類似的方式，li:first-child:nth-last-child(3n+0)意味着父項必須有多個子項，爲3的倍數。

一旦我們限制了第一個元素的有效性，我們就需要選擇最後一個元素以便突出他們。兄弟選擇器（~）將選擇匹配元素的同胞，我們再次使用nth-last-child從末尾選擇元素N.

這些規則被組合並重復以處理最後一行中1,2或3個元素的情況。