CODEWITHSUNDEEP
cssfocus
Cezar Augusto
Cezar Augusto

Reputation: 9872

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

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.

Upvotes: 8

Views: 2648

Answers (1)

nara92
nara92

Reputation: 153

":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.

Upvotes: 1

Related Questions