:indeterminate

I learned that it only applies to three HTML elements: checkboxes, radio buttons and progress. That makes sense because the point of the selector is to target the status of an element and determine whether or not it has a status at all.

For example, a checkbox can either be checked or unchecked. When using checkboxes in a form, we often default to one state or the other and, while that’s all good and dandy, it also assumes a state before the user has interacted with it. Adding a third undetermined state is where something like this helps.

The interesting thing about using checkboxes as an example is that HTML does not support an :indeterminate state right out of the box. It requires Javascript to render the state, though it is not required at all for radio buttons or progress. Go figure!