Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox, query selector and the visible pseudo selector

Is there anyway to use a pseudo selector with Firefox's querySelector() or querySelectorAll() functions to detect visibility? In particular I want to be able to do something like this:

elem.querySelector('#list .list-item:visible');
elem.querySelector('#section .sub-section:visible .title');

No need to worry about browser inconsistencies or other implementation, just Firefox. Thanks!

EDIT: Visible is defined by display not being none and visibility not being hidden.

like image 351
macguru2000 Avatar asked Nov 14 '12 22:11

macguru2000


2 Answers

Since there is no native implimentation of the :visible pseudo selector I decided to use CSS classes to hide and show my elements, thus allowing to simply just check for the class name instead of visibility. Here is what my selector looks like now:

elem.querySelector('#list .list-item:not(.hidden)');

Now in 2016 we can also use the hidden html5 attribute, so this selector would work too:

elem.querySelector('#list .list-item:not([hidden])');
like image 199
macguru2000 Avatar answered Oct 15 '22 02:10

macguru2000


No, there isn't. The CSS specification doesn't define a :visible (or related) selector, and AFAIK Firefox doesn't implement non-standard pseudo selectors.

If you'd like to implement this yourself, note how jQuery implements its :visible selector:

In jQuery 1.3.1 (and older) an element was visible if its CSS "display" was not "none", its CSS "visibility" was not "hidden", and its type (if it was an input) was not "hidden". In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

Source: http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled

like image 22
David Wolever Avatar answered Oct 15 '22 02:10

David Wolever