CODEWITHSUNDEEP
htmlcssspecificationsw3ctabindex
Daydreaming Duck
Daydreaming Duck

Reputation: 2270

Is tabindex hack for CSS :focus specified somewhere?

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:

  1. div element is not focusable by default.
  2. div element with tabindex is focusable.

Upvotes: 0

Views: 4680

Answers (2)

unor
unor

Reputation: 96587

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.

Upvotes: 3

Korgrue
Korgrue

Reputation: 3478

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

Upvotes: 0

Related Questions