css - :focus selector in CSS

Question

JSFiddle (The *:focus rule is to illustrate which element is marked as having focus.)

What I'm wondering is why, when I click a menu item, it gets the focus... but clicking a menu item does not give it focus.

What's wrong with the CSS to make it behave this way?

Answer 1

focus is generally only for elements that can receive keyboard or other input, so by this heuristic lis don't qualify. This question has more about it..

In the specs, CSS doesn't explicitly define what elements can be in those states, so it's hard to come up with a set rule for what can and can't be set to focus.

What might work for your purposes is active, which you can view here.

Answer 2

There is a small trick - if you want an item which not have focus anabled by default you should make it tabbable by seting its tabindex="N" - N is a number. As simple as that. if you add tabindex to your clickable items they will get focus when you click. If a tag can be tabbed it have to be able to get focus. Adding tabindex attribute to all nodes of the menu is very simple if you have jQuery loaded:

$(function() { 
  $('#navbar *').attr('tabindex', '1');
});

end everithing comes in place. You can do it using pure JavaScript of course.