The :focus Pseudo-class And When It Is Applied

The :focus selector is used to style elements that have focus in the general sense. But when exactly is it applied, considering cases like mouse down or touch? And how as a web dev

Solution 1:

:focus is the psuedo selector that relates to which field is currently selected by the keyboard. Tabbing through inputs should apply :focus to that input.

:active is the pseudo selector that relates to "activating" a button or link. So clicking or touching it will apply :active to that element.

In CSS...

button:active {
    border: solid red 1px;
}

This will add a border of 1px that is red while you take action on that element making it the active link being clicked.

button:focus {
    border: solid red 1px;
}

This will do the same styling when you tab into that button. For :focus to work in some cases the tabindex is important. For the same :focus styling to work on buttons make sure to include a tabindex on them.

If you need more help, let me know.