Home » jQuery :visible selector

jQuery :visible selector

by Online Tutorials Library

jQuery :visible selector

The :visible selector in jQuery is used to select every element which is currently visible. It works upon the visible elements. The elements that are consuming space in the document are considered visible elements. The height and width of visible elements are larger than 0.

The elements with CSS properties such as visibility:hidden, and opacity:0 are considered to be visible elements as the elements with corresponding properties consume space in the document although they are not visible to the eye. Elements that are not in the document are considered to be hidden.

This selector works opposite to the :hidden selector. So, the :hidden selector does not select the elements selected by the :visible selector and vice versa.

So, the :visible selector will not select the elements that satisfy any of the below condition –

  • Form elements with type = “hidden”.
  • Elements whose width and height are set to 0.
  • Element with display : none.
  • A hidden parent element that is hiding the child element as well.


The commonly used syntax of using the :visible selector is given as follows –

The selector is used without any argument. However, we can use the id, class, or tag name before the selector to select the specific element.


In this example, we are applying the CSS property visibility:hidden to a paragraph element and assigning it a unique id. Using this id, we will check the corresponding element using the :visible selector, whether it is visible or not.

Test it Now


After the execution of the above code, the output will be –

jQuery :visible selector

After clicking the given button, the output will be –

jQuery :visible selector

You may also like