Effect of pseudo classes on child- and parent-elements

Question

I have a <input> inside a <div>. Now if I use the pseudo-class :hover both of the elements gets the pseudo-class.

But If i use :focus only the <input> gets that pseudo-class. I have read that only certain elements can have the :focus pseudo-class and <div> is not one of them.

Now I wonder if there is some other pseudo-class I can use that exist on both tags with similar behavior as :focus, but will appear on both tags like :hover does.

UPDATE: plunker illustrating the problem.

set `tabindex='0'` to the div and `:focus` works: http://codepen.io/zvona/pen/qORLar — Samuli Hakoniemi, Oct 01 '15 at 09:45
I want to style the outer `
` when the `` has focus( `:focus`), but i get that that doesn't work. If the `` is hovered (`:hover`), the div gets `:hover` as well. Now I would like that behavior, only with something like focus. Does that make sense? — Gustav, Oct 01 '15 at 09:49
@zvona tabindex did not work. And the codepen does not seem to work either.. — Gustav, Oct 01 '15 at 09:51
@Gustav ... The codepen demo works well on chrome and firefox. — Luís P. A., Oct 01 '15 at 09:55
@Gustav The `tabindex` solution works in so far as it will allow the `div` to be focusable. It won't solve your issue, however, as you can't focus on more than one element at a time. Please can you provide code showing what you are trying to achieve, we may be able to come up with a solution which tackles your problem from a different angle. — Hidden Hobbes, Oct 01 '15 at 10:00
Pretty sure that this isn't possible without JS/JQ. It's effectively requiring a [parent selector](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector)...and there isn't one. — Paulie_D, Oct 01 '15 at 11:03
@zvona ok sorry, it does work, my problem is that the clicking occurs on the input. See the question updated with a plunker — Gustav, Oct 01 '15 at 11:09
If you are focusing in the input, the div is not focus. You can't achieve this with CSS there are not parent selector. There is an `:active` pseudoclass, but is triggered only onMouseDown, and not preserve after mouseUp — Marcos Pérez Gude, Oct 01 '15 at 11:16
@MarcosPérezGude allright.. was there something about a parent selector in css4? — Gustav, Oct 01 '15 at 11:29
The future only time will tell. Now, you only can achieve it with javascript, something like `input.on('focus', funcBg);` — Marcos Pérez Gude, Oct 01 '15 at 11:30

score 1 · Answer 1 · answered Oct 01 '15 at 22:26

Effectively, in order to be able to be focused, an element needs to be focusable:

An element is focusable if all of the following conditions are met:

The element's tabindex focus flag is set.

The element is either being rendered or is a descendant of a canvas element that represents embedded content.

The element is not inert.

The element is not disabled.

In your case, the problem is the first condition. You can make the div focusable by setting its tabindex focus flag through a tabindex attribute.

p:focus {
  background: #0f0;
}

<p tabindex="-1">Click me. I can be focused</p>
<p>But I can't :(</p>

However, there is a problem. There can only be one focused element in the document. Therefore, the div and the input can't be focused simultaneously.

In fact, you don't want to select the div when it is focused, you want to select it when it contains a focused element.

The Selectors Level 4 draft addresses this exact problem by creating the new :focus-within pseudo-class:

9.4. The Generalized Input Focus Pseudo-class: :focus-within

The :focus-within pseudo-class applies to elements for which the :focus pseudo class applies. Additionally, the ancestors of an element that matches :focus-within also match :focus-within.

Sadly browsers don't support it yet. So meanwhile, use JS.

Thanks, I'll look for the :focus-within when it comes. – Gustav Oct 02 '15 at 06:22 — Gustav, Oct 02 '15 at 06:22

score 0 · Accepted Answer · answered Oct 01 '15 at 11:35

0

I don't think you can do what you want with just CSSyou may need a bit of jquery like:

$(document)
.on("focus", "input", function(){

///here what you want, in this example add a class to your div
$('div').addClass("divfocus");

})

JSFIDDLE

answered Oct 01 '15 at 11:35

Alvaro Menéndez

8,766
3
37
57

Effect of pseudo classes on child- and parent-elements

2 Answers2