jQuery Selectors: Selects visible elements

This entry is part 26 of 33 in the series jQuery Selectors


Elements are considered visible if they consume space in the document.

Visible elements have a width or height that is greater than zero.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>visible demo</title>
        div {
            width: 50px;
            height: 40px;
            margin: 5px;
            border: 3px outset green;
            float: left;
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>

<h4>Click On The Square Box Below</h4>


    $('div:visible').click(function () {
        $(this).css('background', 'yellow');


Series Navigation<< jQuery Selectors: Enabled and disabled input box
jQuery Selectors: Filters out all odd indexed elements >>