Apply the same effect to all elements with the same tabindex in the focus of one of them

Question

In my last, I asked how to make non-orientable elements that can be focused in the means of the css selector. The answer is to use tabindex.

Now I wanted that when the element with the selector is focused (clicked), the other element selected by the selector also has an effect. It may seem strange, but I could have done it a long time ago by accident, but I forgot how.

Here is a jsfiddle example: http://jsfiddle.net/s4nji/xa8j4/

Answer 1

This selector performs the trick:

li[tabindex='1']:focus ~ li[tabindex='1'], li[tabindex='1']:focus { background: black; color: white; } 

Here is an example.

He only chooses when you focus on the first, though.

This only works in CSS3, since we use a common selector.

When the first is focused, it selects the second with the same tabindex and adds the background. Second li[tabindex='1']:focus - apply the background to the current focused one.

A common selector can only select the following items with the same parent. Unfortunately, CSS cannot travel the DOM. For this reason, the only way to make it work in the opposite direction is to use Javascript.