The naming pattern of Event Effect is used to describe the component interactions by input devices such as mouse and keyboard. Some of the naming patterns uses CSS 3 attribute selector directly.

Mouse Operation

The following naming patterns are based on mouse operation.

:active

mouse clicked event.

:focus or -focus

focused event.

:hover or -hover

mouse over event.

-drag

dragged event.

Component State

The following naming patterns are based on component states.

-selected

selected state.

-checked

checked state.

-checkable

can be checked state.

[disabled] or -disabled

disabled state.

:visited

visited state.

-invalid

invalid state.

[readonly] or -readonly

readonly state.