Order of hyperlink classes in CSS file

HTML & CSS
1

According to CSS3 Anthology, one uses the acronym LoVeHAte to order the CSS class declarations in a CSS file.
Should the
a:focus appear at the very end?

a:link{font-family: Arial; font-size: 14px; color: #184785; text-decoration: none;}
a:visited{font-family: Arial; font-size: 14px; color:#184685; text-decoration: none;}
a:hover {font-family: Arial; font-size: 14px; color: #00FF00;text-decoration: underline;}
a:active {font-family: Verdana; font-size: 14px;color: #0033CC;text-decoration:none;}
a:focus {font-family: Sans-serif; font-size:14px; color:#184585; text-decoration: none;}

2

To be honest, I don’t think it matters, but I normally put it after the others.

3

No - active should come last as it is either hover plus mouse button or focus plus enter key.

4

Thank you for the reply.

Would you agree with this order?

a:link{font-family: Arial; font-size: .7em; color: #184785; text-decoration: none;}
a:visited{font-family: Arial; font-size: .7em; color:#184685; text-decoration: none; }
a:hover {font-family: Arial; font-size: .7em; color: #00FF00; text-decoration: underline;}
a:focus {font-family: Sans-serif; font-size: .7em; color:#184585; text-decoration: none;}
a:active {font-family: Arial; font-size: .7em;color: #0033CC;text-decoration:none; }

5

Yes, I agree with that order; but…,

I have been known to place the :focus pseudo-class before the :hover pseudo-class because I wanted the :hover border-color to override the :focus border-color on :hover. Remember that the pseudoclasses cascade.

1 Like
6

Try this and see if it gives the same effect:

a:link    {font-family: Arial; font-size: .7em; color: #184785; text-decoration: none;}
a:visited {color: #184685;}
a:hover   {color: #00FF00;}
a:focus   {color: #184585; font-family: Sans-serif;}
a:active  {color: #0033CC;}

Edit:
Formatted by adding three back-ticks to start and end of CSS content.

7

It wont be exactly the same because the original changes the font back to Arial when the field has the focus and is active

1 Like
8

Well spotted :slight_smile:

9

Here’s a very old article discussing where :hover and :focus should go and there are differing opinions. If you style hover and focus the same then it doesn’t really matter if hover is before focus or vice versa.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.