0

I need to select the children nodes of elements where at least one child element does not have a specific property.

e.g. given this html

<div class="x" id="p1">
  <div class="a" id="c1"></div>
  <div class="a" id="c2"></div>
  <div class="b" id="c3"></div>
</div>
<div class="x" id="p2">
  <div class="a" id="c4"></div>
  <div class="a" id="c5"></div>
  <div class="c" id="c6"></div>
</div>

I would like to select all the children of #div2 (i.e. #c4, #c5, #c6) because #div2 does not contain a child with class b applied to it.

or alternatively the reverse selection would suite my needs. i.e. to select all the children of any element where at least one child does have class b applied to it (#c1, #c2, #c3 in the above example)

For this latter example I tried using .b~* but this only selects nodes after the one with class b applied, not those before.

I'm not sure if this is possible in CSS. If it is 100% not possible then that is an acceptable answer, I'll have to do it in JQuery instead (though I would prefer to avoid it if possible)

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
DJL
  • 1,821
  • 3
  • 17
  • 31
  • In jQuery it's cheap to accomplish - `$('.x:not(:has(.b)) div')` and `$('.x:has(.b) div')` respectively. – BoltClock Jan 14 '14 at 13:38
  • @BoltClock thanks - my JQuery backup was going to use a loop. This is much better! I'd still like a pure CSS option is one exists. – DJL Jan 14 '14 at 13:41
  • Here is the Answer: http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar. It's not possible – schnawel007 Jan 14 '14 at 13:42
  • @schnawel007 thanks, you confirmed my fears. Can you make that into an answer so I can accept it? – DJL Jan 14 '14 at 13:44

2 Answers2

0

No, you can't do this by css. CSS can't select elements based on their children.

But with javascript/jquery it is easily doable.

eg :

$('.x:not(:has(.b)) div') to select the element.
Ranjit Singh
  • 3,597
  • 1
  • 18
  • 35
0

Here is the Answer: CSS selector for "foo that contains bar"?

Its not possible to do this by pure CSS, you need JavaScript.

Community
  • 1
  • 1
schnawel007
  • 3,770
  • 3
  • 15
  • 21