2012-01-01 10 views
4

そのうちの一つの焦点に同じtabindexを持つすべての要素に同じ効果を適用し、私はunfocusable要素にフォーカスが可能なCSSセレクタの手段になるようにする方法を尋ねました。答えはtabindexを使うことです。私の最後の1で

は、今私は(クリック)セレクタを持つ要素がフォーカスされたときに、ことを望んでいた、セレクタにより選択された他の要素にも効果を得ました。それは奇妙に聞こえるかもしれませんが、私は偶然、ずっと前にこれを行うことができましたが、どうやって忘れましたか?

ここjsfiddle例である:

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

Hereの例:

http://jsfiddle.net/s4nji/xa8j4/
+0

JavaScriptやページの読み込みやJavaScriptが必要な共通のクラスを設定しなくても可能だとは思いません。 – Scott

答えて

6

このセレクタは、トリックを行います。

最初のものに焦点を当てても両方を選択するだけです。我々は、一般的な兄弟セレクタを使用しているので、

これは、CSS3で動作します。最初のものは、フォーカスされ

、それは同じtabindex有する第二一つを選択し、バックグラウンドを追加します。 2番目のli[tabindex='1']:focusは、現在フォーカスされている背景にも背景を適用することです。

一般兄弟セレクタは、同じ親を持つ要素を後続選択することができます。残念ながら、CSSはDOMを上に移動することはできません。この理由から、それを後方に働かせる唯一の方法はJavascriptを使用することです。

+0

素敵なトリック!しかし、htmlはタブのインデックスを重複させてはいけませんか? – Scott

+0

@Scott:重複したタブインデックスは問題ありません。何が起こるのは、同じタブインデックスを持つ要素がタブでグループ化されるということです。この場合、最初のものはタブ付きのときにフォーカスを得るための最初の要素になり、4番目のものは2番目の要素になります。その後、それはtabindex 2にジャンプし、同じように動作します。 – Purag

+0

ありがとうございます。私は同様のtabindexesでタブ移動を認識します。私はちょうど重複するインデックスがないというルールを常に守ってきました。それでも私はCSS3の兄弟を探しています。ありがとう – Scott

関連する問題