:focus-within when focusing first child but not the last

5
votes

I have a <section> element that I want to set focus within only when the first child element receive focus but not the second. I tried using the :not pseudo-class but that didn't work out.

Worth noticing that I still need to have focus on the second element, just don't want to have two focused elements (parent + child) as the example below.

Codepen example

Better if a HTML/CSS only hack/solution.

1
cssfocus
You should add the code example in the question. What if codepen would stop? The question wouldn't make sense anymore - SuperDJ

1 Answers

1
votes

":focus-within" makes the parent element to have focus if any of its children have focus itself. You can't do this only with css, as you can only select elements that are siblings or children, except for this unusual case that selects the parent (even though you can't select which element has focus inside). You are applying the focus within to the section, not to the children.