Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using :focus pseudo class on li or other element else than a,input,button, etc

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/.

like image 483
s4nji Avatar asked Dec 23 '11 10:12

s4nji


People also ask

How do you use pseudo focus class?

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

Which pseudo-class allows you to selectively show a focus ring on elements only if keyboard navigation is detected?

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.)

What selector do you use to match all input elements that have the focus?

The :focus selector is used to select the element that has focus. Tip: The :focus selector is allowed on elements that accept keyboard events or other user inputs.


2 Answers

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

like image 125
Knu Avatar answered Sep 30 '22 16:09

Knu


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.

like image 40
Robert Koritnik Avatar answered Sep 30 '22 16:09

Robert Koritnik