CODEWITHSUNDEEP
jquerycssselectorhidden
Dylan Cross
Dylan Cross

Reputation: 5986

CSS select hidden elements

I am trying to figure out how to accomplish this annoying problem, as far as I know there isn't a :hidden selector in CSS, but you can use it in jQuery. The only other selector I know of in css is :empty, however my elements may not always be empty, but still be hidden.

So here's what I'm trying to do.

 <div class="wrapper">
     <div class="one"></div>
     <div class="two"></div>
 </div>

I want to be able to select "one" or "two" and if it's currently hidden, I want to do something to the other element which is not.

like:

.wrapper .one:hidden .wrapper .two

I know I could do this with jQuery, however I would like to figure out a way that would automatically adjust based on whether or not the hidden element changes to visible, vice versa.

Upvotes: 2

Views: 4311

Answers (5)

c-smile
c-smile

Reputation: 27460

It is not possible in pure CSS in principle. If CSS would allow this then "the first woodpecker that came along would destroy civilization".

Consider something like:

.wrapper .one:not(:hidden) .wrapper .one { display:none; }

This creates perfect infinite loop. Your browser will die trying to solve it.

If it is interesting you can read my article on the subject.

Upvotes: 1

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

I think you are looking for something like this:

SEE DEMO

jQuery:

if($('.one').is(":hidden")) {
   $(".two").css("color","red")    
}​

Upvotes: 0

VVV
VVV

Reputation: 7593

How about this jsfiddle

Instead of searching for the one that's hidden and do something to the other one, why not just search for the one visible?

$(document).ready(function() {

    $('.wrapper div').each(function() {
        if ($(this).is(':visible')) {
          //do something special
        }
    })

})

Upvotes: 0

Alex Kalicki
Alex Kalicki

Reputation: 1533

You can see the complete list of CSS selectors here. Unfortunately, there are none that apply to visibility or select by current CSS style.

The way that will involve the least code would be to give them both a visible class, which you could style in CSS. Then use jQuery to remove the visible class whenever the element gets hidden, and add it when it becomes visible again. Not very streamlined, but it seems to be the best solution.

Upvotes: 0

index
index

Reputation: 3727

I don't know if there is a hidden selector for css but in the meantime, you can add a class probably hidden?

.wrapper .one.hidden

Upvotes: 1

Related Questions