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/.
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.
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.)
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.
That's simple: just add a tabindex
attribute to the elements which normally don't receive focus.
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.
<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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With