jQuery :visible Selector

What You’ll Learn

The :visible selector matches elements that consume layout space in the document — width or height greater than zero (jQuery 3+ includes any layout box). jQuery extension since 1.0; opposite of :hidden.

Introduction

Attach click handlers only to shown panels, count open tabs, validate what the user can actually see, or style elements that take up space — jQuery’s :visible pseudo-class selects every element that consumes layout space in the document.

jQuery has supported :visible since version 1.0. Official documentation defines visibility by layout boxes, not by whether pixels appear on screen. Because checking visibility can force layout recalculation, prefer scoping with CSS first, then .filter(":visible"), or track state with a class when performance matters.

Understanding the :visible Selector

An element is :visible when it (and its ancestors) consume layout space in the document:

• Normal block or inline content with size → matches :visible.
• visibility: hidden or opacity: 0 → still visible to jQuery (uses space).
• display: none or hidden ancestor → not :visible.
• input type="hidden" → not :visible.
• <option> elements → always treated as hidden (never :visible).

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":visible" )

// typical usage:
$( ":visible" )
$( "div:visible" )
$( "tr:visible" )

// official demo pattern:
$( "div:visible" ).on( "click", function () {
  $( this ).css( "background", "yellow" );
});
$( "button" ).on( "click", function () {
  $( "div:hidden" ).show( "fast" );
});

// performance pattern — CSS scope, then filter:
$( "#panel *" ).filter( ":visible" )

Parameters

• None — :visible takes no arguments. jQuery evaluates layout and ancestry.

Return value

• A jQuery object containing every matched visible element in document order.
• Empty collection when nothing in scope is visible.

Official jQuery API example

$( "div:visible" ).on( "click", function () {
  $( this ).css( "background", "yellow" );
});
$( "button" ).on( "click", function () {
  $( "div:hidden" ).show( "fast" );
});

Examples Gallery

Example 1 follows the official jQuery visible demo. Examples 2–5 cover the :hidden complement, visibility vs display, scoped .filter(":visible"), and binding handlers to visible list items only.

$( "div:visible" ).on( "click", function () {
  $( this ).css( "background", "yellow" );
});
$( "button" ).on( "click", function () {
  $( "div:hidden" ).show( "fast" );
});

Click a visible purple div → background turns yellow
Click "Show hidden divs" → hidden divs appear with .show("fast")
Hidden divs become :visible and can be clicked too

var $box = $( "#box" );
var visible = $box.find( ":visible" ).length;
var hidden = $box.find( ":hidden" ).length;
$( "#report" ).text( visible + " visible, " + hidden + " hidden" );

#report shows "2 visible, 2 hidden" (example counts)
:visible and :hidden never overlap in the same scope

console.log( "display:none →", $( "#gone" ).is( ":visible" ) );
console.log( "visibility:hidden →", $( "#invisible" ).is( ":visible" ) );
console.log( "opacity:0 →", $( "#transparent" ).is( ":visible" ) );

display:none → false
visibility:hidden → true
opacity:0 → true

var count = $( "#data-table tbody tr" ).filter( ":visible" ).length;
$( "#report" ).text( "Visible rows: " + count );

#report shows count of visible table rows only
Hidden rows (display:none) are excluded

$( "#menu li:visible" ).on( "click", function () {
  $( this ).addClass( "active" );
});
$( "#toggle" ).on( "click", function () {
  $( "#menu .extra" ).toggle();
});

Click visible menu items → .active class applied
Toggle reveals extra items; newly visible items match li:visible

🚀 Common Use Cases

• Interactive demos — $("div:visible").on("click", …) as in the official demo.
• Reveal hidden UI — pair with $("div:hidden").show() on a button click.
• Tables & lists — count or style only tr:visible or li:visible rows.
• Validation — ensure required fields inside visible panels are filled.
• Tabs & accordions — operate on the open panel with :visible.
• Performance — scope then .filter(":visible") instead of global scans.

📝 Notes

• Available since jQuery 1.0 — jQuery extension, not native CSS.
• Opposite of :hidden — partitions the DOM into two sets.
• visibility:hidden and opacity:0 are :visible.
• All <option> elements are considered hidden — never :visible.
• During animations: visible at start of show; hidden until hide animation completes.
• Heavy use can hurt performance — prefer classes or scoped .filter().
• jQuery 3+: elements with layout boxes (e.g. br, empty inline) are :visible.

💡 Best Practices