Firefox, query selector and the visible pseudo selector

For finding elements that are not display:none the CSS selector equivalent to :visible is

:not([style='display:none'])

You could do the same for visibility:hidden and then chain :not() selectors if you need to.

Here's a fiddle.

Edit: Be careful with spaces and other punctuation. If you later manipulate these elements with JQuery and hide(), for instance, and need to call the same function, then you will need to chain :not([style="display: none;"]) to your CSS selector.

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])');

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