CSS: Is it possible to select a parent div which contains certain elements?

Question

Say I have to following html:

<div class='row'>

  <div class='cell'> 
    <span class='image'> </span>
    Image Cell
  </div>

  <div class='cell'>
     Regular Cell
  </div>

</div>

Is it possible to distinctly select the div which contains the span element versus the div cell which does not have the span element as its first child? Trying todo this without js.

*"Trying todo this without js."* Then why put a `javascript` tag on your question? — T.J. Crowder, Sep 06 '13 at 15:53
Have a look on this article and be aware why parent selectors are not exists in CSS http://css-tricks.com/parent-selectors-in-css/ — Kundan Singh Chouhan, Sep 06 '13 at 16:02
@SunSparc I believe its more maintainable, but because of the performance hit I guess I'll have to javascript it — dchhetri, Sep 06 '13 at 20:30

Robert · Answer 1 · 2013-09-06T21:34:27.370

1

you could change the html a bit add an CSS class to the div that has the span, and use that as your "selector"

 <div class='cell haschild'> 
   <span class='image'> </span>
   Image Cell
 </div>

 <div class='cell'>
    Regular Cell
 </div>

edited Sep 06 '13 at 21:34

answered Sep 06 '13 at 15:54

Robert

388
1
8

score 1 · Accepted Answer · answered Sep 06 '13 at 15:54

You're looking for something like the :has pseudoclass / :parent pseudoclass / < combinator that's never made it into CSS. There isn't one at present. There are apparently significant performance concerns with adding it to existing engines, so it's been raised and dashed more than once. :-) You may find this brief article on the subject interesting.

score 0 · Answer 3 · answered Sep 06 '13 at 15:54

0

Nope. You are not the first person who has needed this. I was on a forum years ago with a guy who was intimate with CSS and DOM parsing and how styles are applied in a browser, and apparently a "parent" selector causes all sorts of problems and resource overhead that it's just not worth it.

answered Sep 06 '13 at 15:54

Ryan Wheale

18,754
5
58
83

Please make a case as to why you are down voting! It does nobody any good to go around this site clicking the down arrow without justification. – Ryan Wheale Sep 07 '13 at 04:31

score 0 · Answer 4 · answered Sep 06 '13 at 16:00

It's not possible with css. There is no "parent" selector. There is no "ancestor" selector. There is no :has, and there is not nor will there be a subject indicator.

Just to not leave you high and dry, this is not difficult to do with JavaScript:

Array.prototype.forEach.call(document.querySelectorAll(".cell"), function (el) {
    if (el.querySelector("span")) {
        //found!
    }
});

http://jsfiddle.net/epwUS/

CSS: Is it possible to select a parent div which contains certain elements?

4 Answers4