24

The structure of my HTML is like so

<div>
    <div>
        <h1>Something</h1>
    </div>
    <div>
        <h1 class='Handle'>Something</h1>
    </div>
</div>

In the event that the div > div does not have a child with the class "Handle" I want the the div > div to have the style cursor:move;. How would I go about doing this in pure CSS, is it even possible?

user1763295
  • 750
  • 3
  • 13
  • 33
  • 1
    No, it's not possible in pure css, your asking about doing an `if` check on a piece of the dom. Which would properly be done in javascript. – Ryan Aug 12 '13 at 14:16

3 Answers3

14

No browser currently supports this

This would work, except no browser currently supports it as far as I am aware. jQuery does though, however.

div > div:not(:has(h1.Handle)) {
    cursor: move;
}
Robin Dijkhof
  • 17,778
  • 11
  • 60
  • 104
Damien Bezborodow
  • 922
  • 13
  • 21
5

There is no parent selector in CSS, so what you are asking is not possible. What you can do is put the cursor:move on every h1 that doesnt has the class "Handle" by using the attribute selector.

h1:not([class=Handle]) {
    cursor:move;
}

http://jsfiddle.net/4HLGF/

Another option is to adjust your HTML, and move your h1 on the same level as the div.

<div>
    <h1>Something</h1>
    <div>
        dragable content
    </div>
    <h1 class='Handle'>Something</h1>
    <div>
        non dragable content
    </div>
</div>

Now you can do the same check on the h1, and target the div that comes after it. 

h1:not([class=Handle]) + div {
    cursor:move;
}

http://jsfiddle.net/4HLGF/2/

koningdavid
  • 7,531
  • 5
  • 33
  • 46
  • Your first solution doesn't work because it will select the h1 and if the h1 doesn't have the class then it needs to select the parent (div). And your second solution isn't possible because it isn't fixed HTML. Every div has to be able to be moved freely on its own so the H1 has to be inside it. – user1763295 Aug 12 '13 at 14:35
  • 1
    @user1763295 Maybe you should read better, in my answer i specificly said that it is not possible to select the div based on the children's class since there is no such thing as a parent selector in css! I was giving alternatives – koningdavid Aug 12 '13 at 14:36
-2

Try

div > div h1:not([class=Handle]) {
    cursor:move;
}
Leo T Abraham
  • 2,419
  • 4
  • 24
  • 53