Is there that :focus really can be used on a tag or it just for form elements?

HTML-CSS
1

Like input textarea etc?

And how its come the order :focus before :hover or after

Thanks.

2

I think as long as the element is focusable, you can use :focus. If I’m not mistaken adding the tabindex attribute to an element makes it focusable, so by extension you can style them too with :focus.

Do you mean like

input:focus,
input:hover {
  ...
}

I don’t think order matters here

3

Thanks!

As for :link :visited :hover :active this need for correct order links. You know about :valid :invalid :required order?

I read this order somewhere

:link, :visited, :hover, :focus, :active

4

That ordering makes sense. That makes the hover styles apply to both visited and unvisited links (by the power of the cascade).

Oh my I didn’t know these existed! I don’t think the ordering between valid and invalid doesn’t matter, since an input value can’t be both valid and invalid at the same time. Not sure about :required

5

As i see on page load the :invalid apply first so after that need the :valid and I think the required is first because is apply as a class.

:required :invalid :valid

6

It looks like if an input is required, leaving it empty counts as invalid, so the :invalid styles apply immediately.

7

Yes and for update that styles after :invalid need the :valid.