A link properties chaining

HTML & CSS
1

hi all,

when we are using the <a> links, we have to apply the properties in the order:
a:link, a:visited, a:hover, a:active

if i mention a css property (eg: color: red) to a ,
it applies to link, visited, hover and active states know?

if i mention color: red to a:link & does not mention anything about the visited, hover and active states, does visited, hover and active states automatically get the red color?

  1. a
  2. a:link
  3. a:visited
  4. a:hover
  5. a:active

if i mention a css property to 1, and does not mention anything about the rest does it get applied to 2, 3, 4 and 5?

if i mention color: red to 1 and color:yellow to 3, and does not mention anything about the rest, will 2 get red, and 4 & 5 automatically get yellow color?

2

The :link and :visited pseudo-classes are mutually exclusive; a link is either unvisited or visited.

The :hover, :focus and :active pseudo-classes are not mutually exclusive and apply to links in the :link or :visited state. You can hover the mouse cursor over an unvisited and visited link, and it can have input focus at the same time. And when you depress the mouse button it will also be active.

So a {color:red} means all links (visited or not) in all states will be red.
a:link {color:red} means that unvisited links in all states will be red, but visited links (in all states) are not affected.

a {color:red} and a:visited {color:yellow} means that 2 (a:link) will be red. 4 and 5 … that depends. Unvisited links (a:link:hover and a:link:active) will be red. Visited links (a:visited:hover and a:visited:active) will be yellow.

3

i didn’t knew that. thanks a lot for the info.

4

i liked that :wink:

5

Yes, but in this case it’s easier to simply use a:active {color:yellow} and make sure this declaration comes last.

That’s the reason you should declare those rules in a particular order. In general,

[list=1][]Generic rules for all links (a {})
[]:link and :visited
[]:hover and :focus
[](optionally, :hover:focus)
[]:active
[](optionally, :hover:active, :focus:active and/or :hover:focus:active)[/list]

This order ensures that the various states are clearly distinguished for the user. It all depends on what you wish should happen during user interaction, though.

6

wow!! you explained it really really well. thanks a lot AutisticCuckoo

so i guess if i use a:hover {color:yellow} and a:focus {color:yellow} , if the link is activated by clicking mouse or by navigating through keyboard and pressing enter, the color will be yellow. right?

7

That depends. If you navigate to the link using the keyboard and press Enter, then the colour will be red. But if you hover the mouse cursor over the link and press the mouse button, then the colour will remain yellow.

You need to understand what the various pseudo-classes mean. Then you’ll also understand how they combine:

:link matches an unvisited link.
:visited matches a visited link.
:hover matches an element when the mouse cursor hovers above it.
:focus matches an element that has input (keyboard) focus.
:active matches an element while it is being ‘activated’.

So :link and :visited only apply to links, and a link is always either one or the other (unvisited or visited). Remember: a link is always one of these.

The other three apply independently, dynamically, depending on what the user does. A link is normally neither of these. But it can sometimes be one, two or all three at the same time. Plus either :link or :visited.

If you hover the mouse cursor over an unvisited link, it’s matched by a:link:hover.

If you navigate by keyboard to a visited link, it’s matched by a:visited:focus. If you then also put the mouse cursor over the link, it’s matched by a:visited:focus:hover.

The active state exists while the user depresses the mouse button or keyboard key to activate the link.

If an unvisited link has input focus and you press Enter, it’s matched by a:link:focus:active. (It needs to have input focus before you can activate it with Enter.)

If the link is visited and you click on it with the mouse, it’s matched by a:visited:hover:active. (You have to hover the cursor above the link to activate it with a mouse click.)

If the link is unvisited, has keyboard focus and is clicked with the mouse, it’s matched by a:link:focus:hover:active.

8

also if i mention a {color:red} , a:hover {color:yellow}

will link and active states have red color & active state have yellow color?

is it ok to do like this?

9

That depends on where those links are. It’s usually not a good idea to style visited and unvisited links the same way. It can be very confusing, especially for people with cognitive disabilities. On the other hand, in a navigation menu it could be the other way round.

Assuming it’s okay, then you could just do this,

a {color:red}
a:hover, a:focus {color:yellow}

It’s a bit risk, though, since you don’t specify a background colour. You’ll get unreadable text if you have a link in an element with a red background.

Also, it’s normally necessary to use more distinctive styling for :focus than for :hover. When you put the mouse cursor over a link, you’r already looking there so a subtle change (like from red to yellow) is enough. But when navigating by keyboard the focus can shift from one side of the screen to another. It can then be necessary to make it more obvious which link has focus, so that the eye is drawn there. I prefer to change the background colour to something garish. :slight_smile:

10

thanks a lot AutisticCuckoo . you explained it really well.

if i mention color: red to a:link & a:visited , and color:yellow to a:hover, but does not mention anything about a: active, what will be the color of a:active state?

11

As I said, it might vary from one touch-screen device to the next.

You can’t hover the mouse cursor on such a device, and I assume most of them don’t have a analogy to keyboard navigation either. Thus it’s like worrying about which colour the wings are … for your car.

If the visual appearance of the active state matters, then specify a rule for a:active. End of problem*. :slight_smile:

*) Except that older IE versions will use this for :focus, which they don’t support.

12

is it ok if i just mention a: {color:red} , a:hover {color:yellow} , a:focus {color:yellow}

is there some issues with not mentioning the other states at all. i guess it’ll work fine, but is it in tune with the web standards?

13

Whether it’s before or after :hover usually doesn’t matter much.

There’s no real right or wrong. It depends on what you wish to achieve. But for a ‘normal’ website, this order should normally be ‘right’, yes.

14

thanks a lot AutisticCuckoo for the excellent answers

15

the thought just came to my mind. that’s all.
and i don’t have a touch-screen device with me now to check.

i hope someone will check it in touch-screen and post the results.

16

I don’t know. It might even vary between devices.
On the other hand, does it matter all that much? It’s a matter of a fraction of a second before the screen clears as a new page starts to load, isn’t it?

17

thanks a lot AutisticCuckoo. you explain it very well.

so :focus should come in b/w :hover & : active right? i was having doubt where to place :focus state. usually everywhere it’s mentioned link, visited, hover and active.

so i guess in the order it should be:

  1. a
  2. a:link
  3. a:visited
  4. a:hover
  5. a:focus
  6. a:active

is this order right?

18

just now i thought of something:

suppose the site is viewed on a touch-screen device , and if i haven’t mentioned the active state, when the link is selected, which property is applied: hover OR focus?

19

i guess there is something more to the question i asked.

if the active state is not mentioned, clicking a link with mouse will have the properties of :hover state. clicking through keyboard will have those of :focus state.

but if we are selecting that through a touch-screen device, both :hover & :focus states does not happen know?
so is the properties of :link & :visited applied?
or am i going crazy??