There is a hack to make work :focus
pseudoclass for div
elements: adding to div
tabindex
. Like this:
.testFocus:focus{
background: red;
}
<div class="testFocus" tabindex="0">awesomeDiv</div>
Is this behavior specified somewhere in W3C documents (where?) or is it just a non-documented hack?
"This behavior" consists of:
div
element is not focusable by default.
div
element with tabindex
is focusable.
tabindex
is one of the global attributes. This means it can be specified on all HTML elements.
0
is a valid value (see "If the value is a zero" under the definition of tabindex
).
So your HTML is fine.
tabindex will work on the following elements in HTML5. https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute
- a elements that have an href attribute
- link elements that have an href attribute
- button elements
- input elements whose type attribute are not in the Hidden state
- select elements
- textarea elements