Menu
Which is the correct way to specify a hover/focus/visited state on a link which has a class?
a:focus.class{}
or
a.class:focus{}
Both seem to work, just wondered which is considered the right way.
259
Combining :hover , :focus , and :activeIf you click and hold the button below, you'll see that it turns yellow. But if you click and hold while dragging your mouse away from hovering over it, you'll see that it loses the colour.
The recommended order is link,visited,focus,hover,active. The :link and :visited pseudo-classes should generally come first. Next should be :focus and :hover—they're specified now so that they override and apply to both visited and unvisited links.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
Definition and Usage The :visited selector is used to select visited links. Tip: Use the :link selector to style links to unvisited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them.
Both are correct since the pseudo-class can appear anywhere in there.
From the CSS2 spec:
Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.
Personally I prefer the second though, for readability mainly, that and it may change as you go, e.g. :hover, so I prefer having all the static then dynamic, not a mix...just makes more sense I guess.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
