States

State refers to the current condition or data of a web application at a point time. This can be what is selected, whether a dropdown is open, what page the user is viewing, what a user has entered or where the mouse is pointing. State is dynamic - changes over time - and affects what the user views or how the application behaves. Is the user logged in? Is the site in dark or light mode? What is in the cart? The state is managed in the browser and can be stored temporarily or persistently.

Temporary State

The browser tracks state-related data temporarily such as <input> values, mouse hovers and what element is in focus. These state values are temporary.

Pseudo Classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of UI element(s). Pseudo-classes allow feedback and visual cues for UI states.

For example, :hover can be used to change a button's color when the user's pointer hovers over it. The :focus pseudo class applies to the currently selected input element.

A pseudo-class consists of a colon (:) followed by the pseudo-class name (e.g., :hover).

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

/* A link that has been visited */
a:visited {
	color: purple;
}

/* input element currently selected */
input:focus {
  background-color: lightblue;
}

See a full list of pseudo-classes.

Session State

Some state values are kept in session storage and are available as long as the browser tab is open. This storage is accessible to the same tab and cleared when the tab is closed. The current username or the progress in filling out a form may be kept in session storage. It should not be used for sensitive data.

Server-Side Session State

Session data may be stored on the server. This is associated with a session ID and sent via cookies.
This storage is more secure than browser session storage and may be used to track a login session.

Persistent State

The browser also has localStorage and cookies where info may be persisted after the browser is closed.

Application State

Frameworks like React track state data that is not automatically tracked by the browser. This could be things like theme preferences and authentication tokens.