Why `div:focus does` does not work without tabindex

Question

div:focus does not work

div:focus {
    background-color:red;
}

<div>Will</div>
<div>You</div>
<div>Marry</div>
<div>Me</div>

But I got a suggestion to solve this by using tabindex

div:focus {
    background-color:red;
}

<div tabindex="1">Will</div>
<div tabindex="1">You</div>
<div tabindex="1">Marry</div>
<div tabindex="1">Me</div>

But I don't have any idea why it works if I added tabindex? And why it does not work without tabindex? I don't want the answer, I just want to know the reason?

It works when adding the `tabindex` attribute as it means that the `div` element will accept the user focus. As divs are not meant to be interacted with they do not accept focus by default. — Rory McCrossan, Apr 23 '18 at 13:04
Please do not abuse the formatting tools. You've been around long enough to know how to properly format a question. — John Conde, Apr 23 '18 at 13:04
Possible duplicate of [Div focus using css](https://stackoverflow.com/questions/30832383/div-focus-using-css) — adprocas, Apr 23 '18 at 13:07
I think the reason for the downvotes are because you should be doing more research, and a rep as high as yours indicates that you should know this. So, [please, do more research](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) — adprocas, Apr 23 '18 at 13:08
Despite the possibility to make a div focusable, this is not really great in terms of semantics. Better use another tag type e.g. ` — lumio, Apr 23 '18 at 13:09
But I am not seen anything for `how it will convert to an focusable element while adding tabindex="-1"` @adpro — Ramesh Rajendran, Apr 23 '18 at 13:10
@RameshRajendran, what about [this question](https://stackoverflow.com/questions/41511512/is-tabindex-hack-for-css-focus-specified-somewhere)? — adprocas, Apr 23 '18 at 13:12
@adpro There have a answer for it. But question is still you are not get it. `how it will convert to an focusable element while adding tabindex="-1"` — Ramesh Rajendran, Apr 23 '18 at 13:14
@RameshRajendran it's right here in the spec: https://www.w3.org/TR/html50/editing.html#attr-tabindex - _"The tabindex content attribute allows authors to control whether an element is supposed to be focusable..."_ — Turnip, Apr 23 '18 at 13:16
@Turnip you are the only one provide for the correct link. I want to know exactly after that line `The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation.` — Ramesh Rajendran, Apr 23 '18 at 13:18
@RameshRajendran, the links in the answer give you answers to your questions. For example, `The tabIndex IDL attribute must reflect the value of the tabindex content attribute. Its default value is 0 for elements that are focusable and -1 for elements that are not focusable.` is in https://www.w3.org/TR/2016/REC-html51-20161101/editing.html#the-tabindex-attribute — adprocas, Apr 23 '18 at 13:48

score 9 · Accepted Answer · edited Apr 23 '18 at 13:07

9

Well, the div is not a focusable element, adding tabindex="-1" will allow the div to be focusable, simple as that. Plus, with tabindex="-1" you can even make non-tabbable elements tabbable, handy when used in a form that contains non-tabbable elements

edited Apr 23 '18 at 13:07

Mamun

66,969
9
47
59

answered Apr 23 '18 at 13:04

TheRev

124
13

Exactly what i want to know. But how it will convert to an focusable element while adding `tabindex="-1"`??? – Ramesh Rajendran Apr 23 '18 at 13:08
By default the element can have an :active state. But only certain elements are focusable – lumio Apr 23 '18 at 13:12
Exactly as @RoryMcCrossan said, the div is not editable. Adding the tabindex (that decides the tab order of the elements) and setting it to `-1` will allow the div to be editable, but will not be included in the tab order. For more details go [here](https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/) @RameshRajendran – TheRev Apr 23 '18 at 13:13
@RameshRajendran **1.** divs are not focusable elements by default. **2.** tab-able elements are focusable elements. So making divs tab-able will make them focusable. – ibrahim mahrir Apr 23 '18 at 13:13
@ibrahimmahrir `tab-able elements are focusable elements` i got it. But i want to know it **WHY tab-able elements are focusable elements**??? – Ramesh Rajendran Apr 23 '18 at 13:16
Read my comment please, you will find it out @RameshRajendran – TheRev Apr 23 '18 at 13:17
@RameshRajendran Well, how can you implement tab-ability without focusability? How can you tab between elements? – ibrahim mahrir Apr 23 '18 at 13:18

Alejandro Teixeira Muñoz · Answer 2 · 2018-04-23T13:53:54.457

1

As they say in this docs:

Tip: The :focus selector is allowed on elements that accept keyboard events or other user inputs.

Then, a div is not a Focusable object.

Plz, review official mozzila docs about :focus

If you want to test that it´s really working, use an input (it really is focusable). You will see it´s working

input:focus {
    background-color:red;
}

<div>
<input type="text">
Will
</input>
</div>

<div>
<input type="text">
You
</input>
</div>

<div>
<input type="text">
Marry 
</input>
</div>

<div>
<input type="text">
Me 
</input>
</div>

edited Apr 23 '18 at 13:53

answered Apr 23 '18 at 13:07

Alejandro Teixeira Muñoz

2,758
1
22
31

5

Please note that W3Schools is not (and never has been) 'the docs'. They are not a reference, just a site who pretended to be affiliated with the W3C a long time ago and SEO'd their way to the top of Google. Their articles are often outdated and sometimes just plain wrong. MDN is far more comprehensive and accurate: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus – Rory McCrossan Apr 23 '18 at 13:08
Ok. but my main question is `how it will convert to an editable element while adding tabindex="-1"??` – Ramesh Rajendran Apr 23 '18 at 13:09
1

@RoryMcCrossan, great explanation about W3Schools. A company I used to work for blocked us from accessing their "docs". I'm assuming this is the reason why. I might suggest finding a more reputable source to the OP of this answer. – adprocas Apr 23 '18 at 13:10
@RoryMcCrossan You are Ok, but your link does not say the crucial tip I pasted there. Adding both links. :) – Alejandro Teixeira Muñoz Apr 23 '18 at 13:51
1

That's because it's the `tabindex` that's doing that, not the `:focus` selector: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex – Rory McCrossan Apr 23 '18 at 13:57
No, that´s because "The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).". I think You are right about that the tabindex helps you to do what you need, But, surely, a div, will never accept keyboard events or other forms of text input (out-of-the-box)... The official W3 docs: https://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes – Alejandro Teixeira Muñoz Apr 23 '18 at 16:31

score 1 · Answer 3 · answered Apr 23 '18 at 13:20

I got it what i want, from @Turnip comment

My Question:

why it's works if I added tabindex?? and why it does not works without tabindex? I don't want the answer i just want to know the reason??

Answer:

The tabindex content attribute allows authors to control whether an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation, and what is to be the relative order of the element for the purposes of sequential focus navigation. The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation.

Referrence

Why `div:focus does` does not work without tabindex

3 Answers3

My Question:

Answer:

Linked