Why is it impossible to effect child element with focus?

Question

I was thinking that there's only two ways to focus element - using JavaScript, or in case it's a div with an contenteditable attribute. But this time I tried something different: I tried to effect input[type="text"] within a div (without contenteditable) using the parent.

I know that when a child element is focused, the parent is focused too - I mean, If I have the following example:

<form action="/" method="get">
    <input type="text" placeholder="Hi I'm Text!" />
</form>

When I focus on the textbox, the form will be focused too. I can do the following:

form input[type="text"]:focus {
    /* CSS goes here */
}

But I can not do something like this:

form:focus > input[type="text"] {
    /* The same CSS goes here */
}

I already solved my own problem, but I wonder why it can not work this way. As I said (and feel free to correct me if I'm wrong) - when I focus on the input, I'm automatically focusing the parent element too (and it's own parent element, etc.) So why can't I simply use :focus on the parent, and then effect the child?

Possible duplicate of [Which HTML elements can receive focus?](https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus) — BSMP, Jul 21 '17 at 00:48

score 0 · Accepted Answer · answered Jun 24 '17 at 14:58

0

You can't focus on a form element. If you want, you can add it the tabindex attribute, such as <form tabindex="0">.

answered Jun 24 '17 at 14:58

Itay Ganor

3,965
3
25
40

I know I can't... I asked why is it impossible. – Jun 24 '17 at 14:59
Becuase only some of the elements can be focused, depend on the browser you use. [This answer](https://stackoverflow.com/a/1600194/63409650) explains it. – Itay Ganor Jun 24 '17 at 15:03
Glad I could help, Bevakasha! – Itay Ganor Jun 24 '17 at 15:06

score 0 · Answer 2 · answered Jun 24 '17 at 15:06

0

Forms are containers for controls and as such not expected to be getting direct user interaction.

According to W3C, users should interact with forms using controls.

Reference: https://www.w3.org/TR/html401/interact/forms.html#form-controls

answered Jun 24 '17 at 15:06

Oluwafemi Sule

36,144
1
56
81

Why is it impossible to effect child element with focus?

2 Answers2