34

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
  • 860
  • 3
  • 16
  • 34
  • 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

26

:has()

Note: Limited support.

Using the :has() pseudo-class, the following example would work, but — as of February 2023 — browser support is limited.

div > div:not(:has(h1.Handle)) {
    cursor: move;
}

*JSFiddle

Alternatively, jQuery supports the :has() selector.

Damien
  • 1,140
  • 15
  • 22
4

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,903
  • 7
  • 35
  • 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
-3

Try

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