jQuery :visible Selector

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 <p> elements by using jQuery :visible Selector.

HTML

<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <script>  $(document).ready(function () {  $("p:visible").css(  "background-color", "green");  });  </script> </head> <body> <center> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> jQuery :visible Selector </h2> <p>GeeksForGeeks</p> <p style="display:none;"> A Computer science portal for Geeks. </p> <p> A computer science portal for geeks. </p> <h4>Sudo Placement</h4> <div>GFG</div> </center> </body> </html>

Output:

Example 2: In this example, we will change the font color of all the visible <p> elements with the help of click function.

HTML

<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <script>  $(document).ready(function () {  $("button").click(function () {  $("p:visible").css(  "color", "blue");  });  });  </script> </head> <body> <center> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> jQuery :visible Selector </h2> <p>GeeksForGeeks</p> <p style="display:none;"> A Computer science portal for Geeks. </p> <p> A computer science portal for geeks. </p> <button>Change color</button> <h4>Sudo Placement</h4> <div>GFG</div> </center> </body> </html>