What Does the jQuery :visible Selector Do?

The jQuery :visible selector targets and selects all HTML elements that are currently visible within the DOM layout. This article explains how jQuery determines an element's visibility, clarifies the distinction between visual rendering and layout space, highlights important exceptions like visibility: hidden, and provides straightforward usage examples.

How jQuery Defines Visibility

In jQuery, an element is considered visible if it consumes physical space in the document. An element qualifies as visible if its layout width or height is greater than zero, or if it has child elements that occupy layout space.

An element is treated as hidden (and therefore excluded by :visible) if:

• It has a CSS display value of none.
• It is a child of an element with display: none.
• It is an <input> element with type="hidden".
• Its computed width and height are both explicitly set to 0.
• It has not been appended to the DOM (it is detached).

The visibility: hidden and opacity: 0 Exception

A common point of confusion is how jQuery treats visibility: hidden and opacity: 0.

Even though elements styled with visibility: hidden or opacity: 0 are invisible to the human eye, they still consume space and affect the flow of the document layout. Because they have a measurable height and width, the :visible selector considers them visible.

If you need to check whether an element has visibility: hidden, you must inspect its computed CSS style directly using .css('visibility') === 'hidden' rather than relying on :visible.

Syntax and Basic Usage

The :visible selector can be appended to any valid jQuery selector.

To select all visible <div> tags on a page:

$("div:visible");

To check if a specific element is currently visible:

if ($("#myElement").is(":visible")) {
    // Action to take if the element is visible
}

To find all visible table rows inside a specific table:

$("#dataTable tr:visible");

Performance Considerations

Because :visible is a custom jQuery extension and not part of the standard CSS specification, browsers cannot use the native querySelectorAll() method to evaluate it. Querying the entire DOM with $(':visible') requires jQuery to iterate through elements and calculate their layout dimensions, which can trigger browser reflows and degrade performance.

For optimal performance, always scope the selector by prefixing it with an ID, class, or tag name (e.g., $('.menu-item:visible')), or filter an existing jQuery collection using .filter(':visible').