: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?

What you describe only works that way in Internet Explorer.. (*so i would not rely on it..*). FF and Chrome do **not** give focus on the `div` when clicked.. — Gabriele Petrioli, Oct 29 '12 at 23:58

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

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.

edited May 23 '17 at 10:25

Community

1
1

answered Oct 29 '12 at 23:52

jamesplease

12,547
6
47
73

But `onkeydown` events will fire on the `
`... And that doesn't explain why `
` is okay. Nor does it explain why if I wrap the content of the `
` with `
` tags, it still doesn't accept focus.

– Niet the Dark Absol Oct 29 '12 at 23:54

Reflective · Answer 2 · 2012-10-30T00:09:16.390

0

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.

edited Oct 30 '12 at 00:09

answered Oct 29 '12 at 23:58

Reflective

3,854
1
13
25

That's a neat trick, however now I'm facing the problem that elements with focus don't trigger focus in their parent elements (even though they would receive keyboard events too). Any magic for that, or is my CSS menu a dead-end? – Niet the Dark Absol Oct 30 '12 at 00:54

:focus selector in CSS

2 Answers2