jQuery :visible Selector (original) (raw)

Last Updated : 11 Jul, 2025

The jQuery :visible Selector is used to select all the elements that are currently visible in the document. The visible element does not support any condition that is given below:

• Set to display:none
• Form elements with type="hidden"
• Width and height set to 0
• A hidden parent element (this also hides child elements)

Syntax:

$(":visible")

Example 1: In this example, we will select all the visible

elements by using jQuery :visible Selector.

HTML `

<script>
    $(document).ready(function () {
        $("p:visible").css(
            "background-color", "green");
    });
</script>

GeeksForGeeks

jQuery :visible Selector

GeeksForGeeks

A Computer science portal for Geeks.

A computer science portal for geeks.

Sudo Placement

`

Output:

Example 2: In this example, we will change the font color of all the visible

elements with the help of click function.

HTML `

<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("p:visible").css(
                "color", "blue");
        });
    });
</script>

GeeksForGeeks

jQuery :visible Selector

GeeksForGeeks

A Computer science portal for Geeks.

A computer science portal for geeks.

Sudo Placement

`

Output: