Is styling of `:focus` pseudo-element of buttons and links is meaningful for touch devices?-CodePudding

I supporse, for the :hover the anwer will be definitely "no". On CSS language, it will be

@media (hover: hover) {
  .button {
    outline: 1px solid yellow;
   }
}

What about :focus? I understand if it is still required for input fileds even on touch devices, but what about buttons and links?

CodePudding user response：

:focus certainly applies to buttons and links/anchors, either on touch or non-touch devices.

Try the example below. When you click/tap on the button or link, the style changes until you click/tap somewhere else.

.button:focus,
.link:focus{
  color: red;
}

<button >
Click me
</button>
<br/>
<a href="#" >Link</a>

UPDATE

To answer your question in the comment, :focus is different from :hover, and it is not necessarily about accessibity. These pseudo classes indicate the state of an element.

:focus - represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.
:hover - when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

There is also the :active, which is somewhat related:

:active - represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

So you could style your element based on these different states. But you don't have to, if you design does not need specific style for the state.

There are other pseudo classes available depending on the element, like :visited which is only for links/anchors, and :checked which are specific to checkboxes and radio buttons.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

CodePudding user response：

Meaningful:

you see it for a short while during the touch
if your page stops the action and user remains on a button or link they will see :focus style if defined
if should define it for desktop anyway (for accessibility) see https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html and you probably share styles between desktop and touch devices,