如何選擇沒有特定類的最後一個元素？

Question

如何才能選擇沒有.hidden類的最後li？

我有HTML和CSS這樣的：

ul li:last-child:not(:first-child):not(.hidden) button { 
 
    background-color: red; 
 
}

<ul> 
 
     <li> 
 
     <button>1</button> 
 
     </li> 
 
     <li> 
 
     <button>2</button> 
 
     </li> 
 
     <li class="hidden"> 
 
     <button>3</button> 
 
     </li> 
 
    </ul>

Answer 1

在當前時刻，有一種能夠找到一個元素，然後後跟另一個特定元素沒有CSS方式。

可能很快，會有CSS關係僞類:has()這將使你想要的可能。這目前在CSS Selectors Level 4 Draft，並且看起來不太可能在任何瀏覽器上很快推出。

一個演示在下面，但不要指望它能工作，直到選擇器4草案至少在工作草案中。

請留意CanIUse以查看它何時可用。

ul li:has(+ .hidden:last-child), 
 
ul li:last-child:not(.hidden) { 
 
    background: red; 
 
}

<ul> 
 
    <li> 
 
    <button>1</button> 
 
    </li> 
 
    <li> 
 
    <button>2</button> 
 
    </li> 
 
    <li class="hidden"> 
 
    <button>3</button> 
 
    </li> 
 
</ul>

---

:has()可jQuery中的，所以這裏是一個jQuery替代

Read more here from the Official jQuery Docs

$('ul li:has(+ .hidden:last-child), ul li:not(.hidden):last-child').css('background', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <button>1</button> 
 
    </li> 
 
    <li> 
 
    <button>2</button> 
 
    </li> 
 
    <li class="hidden"> 
 
    <button>3</button> 
 
    </li> 
 
</ul>

Answer 2

:nth和:last-child僞選擇只能與標籤工作並沒有其他選擇像:not或class但如果總是將只有一個.hiddenli在年底，那麼你可以使用像這樣的CSS ：

li:nth-last-child(2) { background: lightblue; }

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li class="hidden">3 hidden</li> 
 
</ul> 
 

 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li class="hidden">4 hidden</li> 
 
</ul>