How do I get ui-sortable to only work on a specific id in CSS?


Tags: jquery,css,jquery-ui,sortable,jquery-ui-sortable

Problem :

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!



Solution :

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 { }

    CSS Howto..

    How to NOT trigger hover effect on table row when hovering over specific element inside it

    How to have JavaScript read a value appended with CSS at a given ID

    How to make DIV constantly display text on click?

    How to show a background image over foreground image using CSS

    How to detect CSS is turned off with PHP?

    How to have constants in Flex CSS files

    How to reserve 'width' for a 'hide' element

    How to create a full CSS box-shadow, not clipped

    How to make cards on the image

    How to get rid of column border of gridview using CSS

    How to change css elements in HAML dependent on what page is calling for the content?

    How to reference this line in CSS, HTML

    how to add a class to buttons attribute using css or jquery

    How can I force text to “normal” (not bold) using css?

    how to do CSS for below image box (not a shadow box) [duplicate]

    how to align a sidebar to the right with css?

    How do you modify the modal height without removing the slide effect in Bootstrap Twitter?

    How (where) can i set fixed cell size in nested html tables, with css?

    How do I use a sprite background image to display once on an element (no-repeat)?

    how to align image and text when floating to image

    Dropdown list showing vertically in Internet explorer

    How to add row highlight using html, css, and javascript?

    How to make span in bootstrap nav have width: 0px?

    How do I (by default) style different types of labels differently?

    How to put a space in front of a next line [closed]

    How To Sync CSS Animations Across Multiple Elements?

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    How to add two class styles to anchor tag

    How can I get rounded corners to fit over other content?

    how to write browser specific css properties?