The elements that are made selectable are all initially given the class ui-selectee, and the parent element that contains the selectables is given the class ui-selectable. While elements are selected they are given the class ui-selected.
While the selecting square is around selectable elements, they are given the class ui-selecting, and for a brief moment, when an element is deselected it is given the class ui-unselecting. These class names are added purely for our benefit, so that we can highlight different states that the selectable may be in.
This extensive class system makes it very easy to add custom styling to show when elements are either in the process of being selected or have been selected. Let's add some additional styling now to reflect the selecting and
selected states. Add the following new selectors and rules to selectable.css:
#selectables div.ui-selecting {
border:1px solid #66CC00;
}
#selectables div.ui-selected {
background:#66CC00; color:#000000...