Topic: How do I set the style of an element based upon what it contains in CSS... Pages that link to <a href="https://ozoneasylum.com/backlink?for=30435" title="Pages that link to Topic: How do I set the style of an element based upon what it contains in CSS..." rel="nofollow" >Topic: How do I set the style of an element based upon what it contains in CSS...\

 
Author Thread
paritycheck
Bipolar (III) Inmate

From: you tell me
Insane since: Mar 2004

IP logged posted posted 07-23-2008 09:56 Edit Quote

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:

code:
<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?

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-23-2008 10:37 Edit Quote

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:

code:
.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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 07-23-2008 13:38 Edit Quote

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.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-23-2008 14:28 Edit Quote

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

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




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

paritycheck
Bipolar (III) Inmate

From: you tell me
Insane since: Mar 2004

IP logged posted posted 07-23-2008 15:43 Edit Quote

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.

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 07-23-2008 20:28 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu