Luke101 Luke101 - 3 months ago 14
CSS Question

How to check if multiple elements exists

Given this html:

<div id="wrapper">
<div id="header-holder">
<div class="header">header 1</div>
<div class="header">header 2</div>
</div>
<div id="project">project data</div>
</div>


I want to apply a style to element in
.header
only if
#project
exists. I'd like to do this with css. Is this possible?

Answer

The trouble with cascading style sheets is they cascade. They go down layer by layer and don't come back up. If your structure were set where your <div id="project"> was above your <div id="header-holder"> you could use:

div#wrapper #project + #header-holder .header { ... }

However, if you are unable to restructure your HTML, then you'll need to use javascript. If you have access to jQuery you could try the following:

$('#wrapper:has(#project) .header').addClass("has_project");

Then in CSS:

.header.has_project{ ... }
Comments