Logo of Computer Classes

Differences between: focus and: active

CSS pseudo-classes are identifiers that are added to selectors to direct style rules only to elements that are in a certain state, thus making it easier for the user to distinguish them from other similar elements but in a different state.

: focus and : active are two of these pseudo-classes that are used for the "focused" and "active" states. With them we can, for example, give specific style to the links activated by a click or distinguish the text box in which it is being written.

As we will see in this online tutorial, any element supports the active state, but not all elements can be focused. For example, the a, button, input or textarea elements are focusable, but not a div (except for some details that we will explain).

Crane Rental in Guadalajara Jalisco

: focus

An item is in the "focused" state when it is the item currently selected and ready to receive actions.

For example, if we have a button element on a page, at first the element does not have any special state, it just exists. Now, if we use the tab (Tab) we can focus element by element until we reach our button.

At that moment, we can give a specific style for that button so that it is distinguished from the rest of the non-focused elements of the page and that the user can know which is the currently selected element and which will be the object of their actions.

button {

background-color: blue;

color: white;

border-radius: 50px;

}

button:focus {

box-shadow: 0 0 0 2px white, 0 0 0 4px blue;

}

: active

If the state: focus allows to differentiate the element that is ready to receive actions, the state: active occurs when the element receives some specific action.

If we continue with the previous example, we use the tab until the button is selected. At this moment, if we click on the button or press the space key (space) or the enter key (Enter), the button will enter the active state: the user action has been carried out on the element.

button:active {

background-color: DarkBlue;

box-shadow: 0 0 0 2px white, 0 0 0 4px DarkBlue;

}

The state: active usually lasts a very short time, only the moment of the action, for example the duration of the click (if you keep the mouse button pressed, the active state will remain until you release). The: focus state, on the other hand, has an indefinite duration. As long as no other item is selected, the item will remain in focus.

Items that support: focus and: active

There are many other state pseudo-classes, for example: hover,: disabled,: empty or: checked, although it must be taken into account that not all elements admit the same states and, therefore, not all these pseudo-classes are they can apply to all elements.

In the case of the pseudo-classes that we are dealing with in this article,: focus and: active, there are very notable differences.

The first is that any element supports the active state, even the root element () as we can see in the following demo:

On the contrary, the focus state occurs only in these elements and these situations:

  • a with href attribute
  • link with href attribute
  • button, select and textarea
  • input, except if the type attribute equals hidden
  • iframe and other navigation context containers
  • Editable sections defined with the HTML Editing API
  • Draggable elements or with implemented sorting or sorting interface (for example, with draggable attribute)
  • Any other element with a tabindex greater than or equal to zero

On the other hand, it must be taken into account that no element in a disabled state (disabled attribute) is focusable, nor selectable, nor activatable, therefore, they cannot be the object of the pseudo-classes: focus or: active, but if the pseudo-class: disabled, as you can see in the following demo:

Date update on 2022-01-06. Date published on 2022-01-06. Category: Computer class Author: Oscar olg Fuente: tutorialesenlinea