Topic: How do I set the style of an element based upon what it contains in CSS... (Page 1 of 1)

Hi guys need help here. I have a div of lets say class container' which can contain divs of class 'content'. The divs would be set up to look kinda like this:

<div class="container">
   <div class="content">...</div>
   <div class="content">...</div>
   <div class="content">...</div>
</div>

Basically I was wondering that is there any way in css to define the classes such that if a div of class 'container' is empty i.e. has no divs within it of class 'content' its display property is none and lets say if the div of class 'container' contains divs of class 'content' it would have a display:block style.

Is there anyway to do it?

not using CCS2, you'll have to use the CSS3 :empy pseudo classe which works in all browsers worth their title. Unfortunately there is no ancestor selector in CSS, so you can't target an element based on whether its children matches some rules. But you probably don't need that. Try:

.container
{
display:block;
}
.container:empty
{
display:none;
}

The fact that IE do not support the :empty pseudo class should not be a big deal. Just an empty space the size of the margin/padding of .container, nothing more.

HTH

OTH, why would you have an empty container div?
If the code is being dynamically generated, it would be better to change the logic so that it doesn't spawn the unwanted div in the first place.

and why have a "content" class on every single first level children of the "container" DIV ?

.container > div
{
/* is enough */
}

Beside having a text saying there is no content might be more appropriate than removing the container DIV altogether.

Well actually its like this that I have a widget which shows contact information for an individual - same address book project I was on. Now the container divs actually hold grouped contact info eg> One container div holds info like phone details tehother holds infolike fax details etc.

Now On the same page I have a little widget that allows you to add any contact detail i.e. phone, fax email etc vi AJAX. The thing is that for aesthetic reasons I want to be able to hide those containers that have no details withiin i.e. if the contact has no emails instead of seeing an empty email div with the heading 'Email' I want the div to display none.

Well, again - all you have to do is not generate an element to hold empty items in the first place.
As the data is pulled and displayed, if there is no email address, don't create the markup for an email field.


This is also screaming for better semantic markup - this is clearly tabular or list-worthy data.
Either way, a class of "content", as poi noted, is not needed.