Introducing the Selectee class names

The elements that are made selectable are all initially given the ui-selectee class, and the parent element that contains them is given the ui-selectable class. While elements are selected, they are given the ui-selected class.

While the selecting square is around selectable elements, they are given the ui-selecting class, and whilst an element is being deselected it is given the ui-unselecting class. These classnames 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 #fe2f2f; }
#selectables div.ui-selected { background: #fe2f2f; color: #fff; }

Save this...