Jak wybrać ostatni element, który nie ma określonej klasy?

Question

Jak mogę wybrać ostatnią li, która nie ma klasy .hidden?

Mam HTML i CSS tak:

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

W obecnej chwili nie ma sposobu, CSS jest w stanie znaleźć element, który jest następnie przez innego konkretnego elementu .

Prawdopodobnie niedługo pojawi się Pseudo-klasa Relacja CSS :has(), która uczyni to, co chcesz. Jest to obecnie dostępne w wersji CSS Selectors Level 4 Draft i prawdopodobnie nie pojawi się wkrótce w żadnej przeglądarce.

Demo jest poniżej, ale nie spodziewaj się, że zadziała, dopóki Selectors 4 Draft nie będzie przynajmniej w Working Draft.

Miej oko na CanIUse, aby zobaczyć, kiedy stanie się łatwo dostępne.

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() jest dostępny w jQuery chociaż, tak oto jQuery alternatywa

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

CSS :nth i :last-child pseudo selektorów może pracować tylko z tagów a nie innych selektorów jak :not lub class ale jeśli nie zawsze będzie tylko jeden .hiddenli na końcu, a następnie można użyć czegoś takiego :

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>