Podchwytliwe pytanie dotyczące selektora CSS, nie wiem, czy to w ogóle możliwe.
Powiedzmy, że to jest układ HTML:
<div></div>
<div></div>
<div></div>
<div style="display:none"></div>
<div style="display:none"></div>
Chcę wybrać ostatnią div
, która jest wyświetlana (tj. Nie display:none
), która byłaby trzecią div
w podanym przykładzie. Pamiętaj, liczba div
s na prawdziwej stronie może się różnić (nawet display:none
jedna).
html
css
css-selectors
Vishal Shah
źródło
źródło
Prawdziwa odpowiedź na to pytanie brzmi: nie możesz tego zrobić. Alternatywy dla odpowiedzi zawierających tylko CSS nie są poprawnymi odpowiedziami na to pytanie, ale jeśli rozwiązania JS są dla Ciebie akceptowalne, powinieneś wybrać jedną z odpowiedzi JS lub jQuery tutaj. Jednak, jak powiedziałem powyżej, prawdziwa, poprawna odpowiedź jest taka , że nie możesz tego zrobić w CSS niezawodnie, chyba że chcesz zaakceptować
:not
operator z[style*=display:none]
innymi takimi zanegowanymi selektorami, które działają tylko w stylach wbudowanych i ogólnie są kiepskie rozwiązanie.źródło
:not
operatora, jak powiedziałeś, może działać w pewnych okolicznościach. Na przykład działa to idealnie w mojej sytuacji, w której mam JS warunkowo ukrywający elementy, który następnie dodaje style wJeśli możesz używać stylów wbudowanych, możesz to zrobić wyłącznie za pomocą CSS.
Używam tego do wykonywania CSS na następnym elemencie, gdy poprzedni jest widoczny:
źródło
[style*='display: block']
display: block !important;
<div style="display: block">
.btn-group > .btn.d-none + .btn
(używanym do grup wejściowych bootstrapa "Myślę, że nie można wybrać według wartości css (wyświetlacz)
edytować:
moim zdaniem sensowne byłoby użycie tu trochę jquery:
źródło
Czyste rozwiązanie JS (np. Gdy nie używasz jQuery lub innego frameworka do innych rzeczy i nie chcesz tego ściągać tylko do tego zadania):
http://jsfiddle.net/uEeaA/90/
źródło
Próbować
div: not ([style * = "display: none"])
źródło
w inny sposób możesz to zrobić za pomocą javascript, w Jquery możesz użyć czegoś takiego jak:
* ponownie zredagowane
źródło
Nie jest to możliwe w przypadku CSS, jednak można to zrobić za pomocą jQuery.
JSFIDDLE DEMO
jQuery:
HTML:
CSS:
jQuery (poprzednie rozwiązanie):
źródło
$('li:visible:last').addClass('red')
.$('li').not(':hidden').last().addClass("red");
Jeśli nie potrzebujesz już ukrytych elementów, po prostu użyj
element.remove()
zamiastelement.style.display = 'none';
.źródło
To zadziałało dla mnie.
źródło