How to check if multiple elements exists

Question

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?

use javascript to apply .header $("#project").addClass("header"); but you don't write when you want to apply it, on click, hover or when? — Teymur Mardaliyer Lennon, Aug 10 '16 at 20:25
For a partial explanation of why CSS can't do this, see http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector — isherwood, Aug 10 '16 at 20:49

Okomikeruko · Accepted Answer · 2016-08-10T21:02:38.043

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

How to check if multiple elements exists

1 Answers1