We can simply select all the visible elements on an HTML page using the visible selector. The j Query visible selector considered an element visible if they consume space in the document. That means elements with visibility hidden; or opacity: 0; are considered visible since they still preserve space in the layout. The visible selector is the opposite of the hidden selector. Therefore, not every item selected by visible is selected by :hidden and vice versa. The elements not included in a file are considered to be hidden;

Syntax  $(":visible")


<!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;
	  .starthidden {
	    display: none;
	  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	<button>Show hidden to see they don't change</button>
	<div class="starthidden"></div>
	<div style="display:none;"></div>
	$( "div:visible" ).click(function() {
	  $( this ).css( "background", "yellow" );
	$( "button" ).click(function() {
	  $( "div:hidden" ).show( "fast" );