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

Like input textarea etc?

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


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:hover {

I don’t think order matters here


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

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

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

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

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