Return to Answer

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

.foo {
 position: absolute;
 left: 10px;
 top: 10px;
 background: #ff0000;
}
.bar {
 position: absolute;
 left: 10px;
 top: 10px;
 width: 20px;
 height: 20px;
 background: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
 <div class="bar"></div>
</div>

When testing an element against :hidden selector in jQuery it should be considered that an absolute positioned element may be recognized as hidden although their child elements are visible.

This seems somewhat counter-intuitive in the first place – though having a closer look at the jQuery documentation gives the relevant information:

Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 0. [...]

So this actually makes sense in regards to the box-model and the computed style for the element. Even if width and height are not set explicitly to 0 they may be set implicitly.

Have a look at the following example:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

.foo {
 position: absolute;
 left: 10px;
 top: 10px;
 background: #ff0000;
}
.bar {
 position: absolute;
 left: 10px;
 top: 10px;
 width: 20px;
 height: 20px;
 background: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
 <div class="bar"></div>
</div>

UPDATE FOR JQUERY 3.x:

With jQuery 3 the described behavior will change! Elements will be considered visible if they have any layout boxes, including those of zero width and/or height.

JSFiddle with jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

The same JS will then have this output:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

When testing an element against :hidden selector in jQuery it should be considered that an absolute positioned element may be recognized as hidden although their child elements are visible.

This seems somewhat counter-intuitive in the first place – though having a closer look at the jQuery documentation gives the relevant information:

Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 0. [...]

So this actually makes sense in regards to the box-model and the computed style for the element. Even if width and height are not set explicitly to 0 they may be set implicitly.

Have a look at the following example:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

.foo {
 position: absolute;
 left: 10px;
 top: 10px;
 background: #ff0000;
}
.bar {
 position: absolute;
 left: 10px;
 top: 10px;
 width: 20px;
 height: 20px;
 background: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
 <div class="bar"></div>
</div>

Update for jQuery 3.x:

With jQuery 3 the described behavior will change! Elements will be considered visible if they have any layout boxes, including those of zero width and/or height.

JSFiddle with jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

The same JavaScript code will then have this output:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

.foo {
 position: absolute;
 left: 10px;
 top: 10px;
 background: #ff0000;
}
.bar {
 position: absolute;
 left: 10px;
 top: 10px;
 width: 20px;
 height: 20px;
 background: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
 <div class="bar"></div>
</div>

When testing an element against :hidden selector in jQuery it should be considered that an absolute positioned element may be recognized as hidden although their child elements are visible.

This seems somewhat counter-intuitive in the first place – though having a closer look at the jQuery documentation gives the relevant information:

Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 0. [...]

So this actually makes sense in regards to the box-model and the computed style for the element. Even if width and height are not set explicitly to 0 they may be set implicitly.

Have a look at the following example:

JSFiddle:

http://jsfiddle.net/pM2q3/1/

HTML:

<div class="foo">
 <div class="bar"></div>
</div>

CSS:

.foo {
 position: absolute;
 left: 10px;
 top: 10px;
 background: #ff0000;
}
.bar {
 position: absolute;
 left: 10px;
 top: 10px;
 width: 20px;
 height: 20px;
 background: #0000ff;
}

JavaScript:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

UPDATE FOR JQUERY 3.x:

With jQuery 3 the described behavior will change! Elements will be considered visible if they have any layout boxes, including those of zero width and/or height.

JSFiddle with jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

The same JS will then have this output:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

When testing an element against :hidden selector in jQuery it should be considered that an absolute positioned element may be recognized as hidden although their child elements are visible.

This seems somewhat counter-intuitive in the first place – though having a closer look at the jQuery documentation gives the relevant information:

Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 0. [...]

So this actually makes sense in regards to the box-model and the computed style for the element. Even if width and height are not set explicitly to 0 they may be set implicitly.

Have a look at the following example:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

.foo {
 position: absolute;
 left: 10px;
 top: 10px;
 background: #ff0000;
}
.bar {
 position: absolute;
 left: 10px;
 top: 10px;
 width: 20px;
 height: 20px;
 background: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
 <div class="bar"></div>
</div>

UPDATE FOR JQUERY 3.x:

With jQuery 3 the described behavior will change! Elements will be considered visible if they have any layout boxes, including those of zero width and/or height.

JSFiddle with jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

The same JS will then have this output:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

When testing an element against :hidden selector in jQuery it should be considered that an absolute positioned element may be recognized as hidden although their child elements are visible.

This seems somewhat counter-intuitive in the first place – though having a closer look at the jQuery documentation gives the relevant information:

Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 0. [...]

So this actually makes sense in regards to the box-model and the computed style for the element. Even if width and height are not set explicitly to 0 they may be set implicitly.

Have a look at the following example:

JSFiddle:

http://jsfiddle.net/pM2q3/1/

HTML:

<div class="foo">
 <div class="bar"></div>
</div>

CSS:

.foo {
 position: absolute;
 left: 10px;
 top: 10px;
 background: #ff0000;
}
.bar {
 position: absolute;
 left: 10px;
 top: 10px;
 width: 20px;
 height: 20px;
 background: #0000ff;
}

JavaScript:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

When testing an element against :hidden selector in jQuery it should be considered that an absolute positioned element may be recognized as hidden although their child elements are visible.

This seems somewhat counter-intuitive in the first place – though having a closer look at the jQuery documentation gives the relevant information:

Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 0. [...]

So this actually makes sense in regards to the box-model and the computed style for the element. Even if width and height are not set explicitly to 0 they may be set implicitly.

Have a look at the following example:

JSFiddle:

http://jsfiddle.net/pM2q3/1/

HTML:

<div class="foo">
 <div class="bar"></div>
</div>

CSS:

.foo {
 position: absolute;
 left: 10px;
 top: 10px;
 background: #ff0000;
}
.bar {
 position: absolute;
 left: 10px;
 top: 10px;
 width: 20px;
 height: 20px;
 background: #0000ff;
}

JavaScript:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

UPDATE FOR JQUERY 3.x:

With jQuery 3 the described behavior will change! Elements will be considered visible if they have any layout boxes, including those of zero width and/or height.

JSFiddle with jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

The same JS will then have this output:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false