11

Is it possible to select an element that is focused, like a:focus or input:focus, but on the other element, such as div, li, span or else?

If it's not possible, how can it be substituted with a tag? I am trying to modify height of a li element when it's focused, tried with a, but the height won't change.

Requested Info :

"Can you also explain how do you put focus on LI?"

Via css selector li:focus. See https://jsfiddle.net/s4nji/Rjqy5/.

s4nji
  • 449
  • 1
  • 6
  • 17
  • Can you also explain how do you **put focus on LI**? – Robert Koritnik Dec 23 '11 at 10:33
  • I did it like this, http://jsfiddle.net/s4nji/Rjqy5/ – s4nji Dec 23 '11 at 12:53
  • I don't see where your `LI` get's focused? All you've provided is a set of `LI` elements an a link that can get focused. And CSS settings for focused elements. That's why I asked you, how you got focus on `LI` element? I suppose the only way is to put an anchor tag inside your `LI` to make it focusable... not `LI` directly of course... – Robert Koritnik Dec 23 '11 at 13:03

2 Answers2

18

That's simple: just add a tabindex attribute to the elements which normally don't receive focus.

Knu
  • 14,806
  • 5
  • 56
  • 89
  • 1
    I tried exactly that on his JSFiddle because it crossed my mind that could make it *focusable*... Didn't seem to work... – Robert Koritnik Dec 24 '11 at 20:12
  • `tabindex="0"` means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order - [moz tabindex docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) – spencer.sm Oct 03 '18 at 19:50
7

You can't focus list items. Not even using a script. I've tried doing $("li:first").focus() but it doesn't do anything. CSS doesn't get set as if it was focussed. This simply means that you either can't focus list items or that :focus pseudo classes don't work on list items.

Put anchors inside list items

<ul>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    ...
</ul>

This will seemingly focus your list item but it will actually focus anchor tags.

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
  • I am trying to modify height by focusing ( clicking ) on the li elements. I tried with a, but the height won't change. – s4nji Dec 23 '11 at 22:01
  • I've put a tabindex on every anchor inserted inside my li tags. But still can't call the :focus css rule on them ... anyone got it working ? – Alex Jan 23 '15 at 08:31
  • @s4nji height won't change? At it as inline block. – Robert Koritnik Jan 23 '15 at 08:51
  • @Alex focusing on `li:focus` or `li a:focus`? Later should work of course. – Robert Koritnik Jan 23 '15 at 08:56
  • @RobertKoritnik I tried li a:focus and I replaced :focus by :active to test if it's the correct access to my DOM element, and with active, it does trigger the css rule. I'm using Firefox up-to-date. I'm gonna read some documentation about the a tag and focus event. – Alex Jan 23 '15 at 09:16
  • @Alex please provide a JSFiddle of it non working so I can look into it. Ok? – Robert Koritnik Jan 23 '15 at 10:11
  • @RobertKoritnik I made a fiddle here : http://jsfiddle.net/jcxzvsk0/ And the interesting part is line 95 in the CSS view. I tried the selectors with li:focus, a:focus. I tried to put a tabindex on the anchor. Thank you :) – Alex Jan 23 '15 at 12:08
  • It's usually useful to make minimum viable example that shows the problem. If you include so much code in it it's distracting to those that'd like to help you and the problem may be in other parts and not in the anticipated part of the code. – Robert Koritnik Jan 23 '15 at 12:38
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69445/discussion-between-alex-and-robert-koritnik). – Alex Jan 23 '15 at 12:40
  • 1
    The problem is your selector in #95. Change it to `nav.menu-custom-wiki > ul > li > a:focus + div` and it starts showing submenus on main menu item clicks (which focuses them). – Robert Koritnik Jan 23 '15 at 12:44
  • Should be the correct answer, anchors is the way to go in order to use css :focus pseudo-class – Alex Jan 23 '15 at 13:02