Question

I have a .column class element that is sortable.
I have two id’s in that column:

<div id="column1" class="column ui-sortable">
<div id="column2" class="column ui-sortable">

I want there to be an open hand when moused over and a closed hand when dragged ONLY on column1.
If my CSS looks like this:

.ui-sortable{
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
#column1 .ui-sortable-helper{
    cursor: grabbing;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

then the open hand shows on column1 and column2 and the closed hand shows on column1 being dragged. But since I only want an open hand on column1, I tried:

#column1 .ui-sortable{
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

But this does nothing to column1. I get a default cursor. Why does adding the id work on .ui-sortable-helper, but not ui-sortable? How do I get the open hand to show up only on column1?

Thank you!

Answer 1

The CSS rule you need is:

#column1.ui-sortable

because you want to specify the element with the id ‘#column1’ which has the class ‘ui-sortable’, and not any element with the class ‘ui-sortable’ which is a child of ‘#column1’.

Due to the discussion below I add some basic information about CSS classes and elements:

<div id="column1" class="column ui-sortable">

this element has one ID ‘column1’, you reference an ID in CSS via the # symbol + IDname, so in this case ‘#column1’. This element also has two classes ‘column’ and ‘ui-sortable’. In your case you wanted to apply CSS-rules only to this specfic element. Which you simpy could do by using the ID-Selector:

#column1 { }

In your question you used:

#column1 .ui-sortable { }

this would be interpreted as find an Element by the ID ‘#column1’ and all nested elements of this parent which have the class ‘ui-sortable’. No match – because the Element itself has the class, not a child. If you remove the space the CSS-Selector:

#column1.ui-sortable { }

it is interpreted as find an Element by the ID ‘#column1’ which hass the class ‘ui-sortable’ This might be a bit overweighted, because an id should be unique, but it solved your problem.
The element with the class ‘ui-sortable-helper’ is a child of the div#column1 so here you’ll need the space.

<div id="column1" class="column ui-sortable">
    <div class="ui-sortable-helper">
    </div>
</div>

So the selector has to have a space:

#column1 .ui-sortable-helper { }