Hi all,
I'm creating documents with a Resources section. The Resources section can have up to four subsections.
I want the subsection title to appear only if I've listed resources under it--in other words, make it conditional based on whether or not there's content below it.
Does anyone have an idea how I might do that?
Thanks!
Kathryn
Section heading that only displays if section has content
Re: Section heading that only displays if section has conten
This is one of the gaps in CSS. You can write selectors which depend on what element(s) precede or contain the target element, but you cannot write selectors which depend on what follows the element or is contained within child elements.
You might be able to do it with a :last-child or :only-child selector, depending on the structure of these subsections. If, for instance, your subsections are divs with an H3.subtitle with the subsection title and then paragraphs and lists and whatever following the H3, then H3.subtitle:last-child {display:none;} or the same with only-child will cause the H3 heading to be hidden when there is not body content following it. However, if the div has any visible borders or margins then this may still leave an empty box or space behind.
Alternatively, you may be able to write some javascript to include in the page which identifies these empty subsections and hides them.
You might be able to do it with a :last-child or :only-child selector, depending on the structure of these subsections. If, for instance, your subsections are divs with an H3.subtitle with the subsection title and then paragraphs and lists and whatever following the H3, then H3.subtitle:last-child {display:none;} or the same with only-child will cause the H3 heading to be hidden when there is not body content following it. However, if the div has any visible borders or margins then this may still leave an empty box or space behind.
Alternatively, you may be able to write some javascript to include in the page which identifies these empty subsections and hides them.