CODEWITHSUNDEEP
cssvisibility
indapublic
indapublic

Reputation: 2318

Pure CSS. Visibility of child elements depends on parent class. Is it possible?

Can I realize this behavior by pure CSS: If parent block has "hidden" class it child elements with "a" class must be invisible

Example

<div class="parent">
    <div class="a"></div>   //  Visible
    <div class="b"></div>   //  Visible
</div>

<div class="parent hidden">
    <div class="a"></div>   //  Invisible
    <div class="b"></div>   //  Visible
</div>

Upvotes: 2

Views: 4203

Answers (6)

Mahmoude Elghandour
Mahmoude Elghandour

Reputation: 2931

Try this

 .parent.hidden .a 
 {
   ///display: none;
 }

note:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

and 

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there

Upvotes: 2

Nitesh
Nitesh

Reputation: 15739

Yes you can.

Add the below to your CSS.

   div.parent.hidden .a{visibililty:hidden;}

Hope this helps.

Upvotes: 1

stanze
stanze

Reputation: 2480

Try this

.parent .a, .hidden .a{ visibility:hidden;}

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Yes, it is possible.

Try this:

.parent.hidden .a{visibility:hidden;}

DEMO.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

Simply use a normal contextual selector:

.hidden .a { visibility: hidden; }

If you actually meant removing the element from rendering, instead of making it invisible (a rather different thing), then you would use .hidden .a { display: none; }.

It would, however, be illogical and confusing (to people reading the HTML source) to use a class name hidden for an element that is not itself meant to be hidden. A name like hidelinks might be better.

Upvotes: 1

Alexandre Lavoie
Alexandre Lavoie

Reputation: 8771

Simply like this :

.parent.hidden .a { display: none; }

Note there is no space between .parent and .hidden.

Upvotes: 1

Related Questions