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>
chcesz wybrać drugą li w swoim przykładzie? – 3rdthemagical
Nie jest to możliwe. – 3rdthemagical
Czy popełniłem błąd, zastanawiając się, czego tak naprawdę chciał? –