Luke101 Luke101 - 2 months ago 11
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 id="project">project data</div>

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


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{ ... }