jQuery :hidden selector

The :hidden selector selects hidden elements.

Hidden elements include:

• Elements set to display:none
• Form elements of type="hidden"
• Elements with width and height set to 0
• Ancestor elements are hidden (so the element is not displayed on the page)

Note: This selector will not select elements with visibility: hidden or opacity:0, as they still occupy space in the page layout.

The opposite of the :hidden selector is the :visible selector.

Note: Elements set to display:none and ancestor elements set to display:none will not be counted as visible elements.

Syntax

$(":hidden")

Example

Select all hidden <p> elements:

$("p:hidden")

Try it - Example

The following example selects all hidden elements and displays them with a red border:

$(document).ready(function(){
  $("button").click(function(){
    $("p:hidden").css("border", "2px solid red");
  });
});

Related Pages

jQuery Selectors :visible Selector

jQuery CSS Reference Manual :hidden CSS Pseudo Class