の条件をどのように:hover
記述すればよいですか?:visited
a:before
試しているのですa:before:hover
が、うまくいきません。
ベストアンサー1
これは実際に何をしようとしているかによって異なります。
要素が疑似クラスに一致する:before
場合に疑似要素にスタイルを適用するだけの場合は、またはと記述する必要があります。疑似要素は疑似クラスの後(実際、セレクター全体の最後) に来ることに注意してください。また、これらは 2 つの異なるものであることにも注意してください。これらを両方とも「疑似セレクター」と呼ぶと、このような構文の問題に遭遇したときに混乱することになります。a
a:hover:before
a:visited:before
CSS3 を記述している場合は、この区別を明確にするために、疑似要素を 2 つのコロンで表すことができます。つまり、a:hover::before
および ですa:visited::before
。ただし、IE8 以前の旧バージョンのブラウザー向けに開発している場合は、 1 つのコロンで十分です。
擬似クラスと擬似要素のこの特定の順序は、スペック:
セレクター内の最後の単純セレクターのシーケンスに、疑似要素を 1 つ追加できます。
シンプル セレクターのシーケンスは、コンビネータで区切られていないシンプル セレクターのチェーンです。常にタイプ セレクターまたはユニバーサル セレクターで始まります。シーケンスでは、他のタイプ セレクターまたはユニバーサル セレクターは使用できません。
シンプルセレクターは、タイプセレクター、ユニバーサルセレクター、属性セレクター、クラスセレクター、ID セレクター、または疑似クラスのいずれかです。
疑似クラスは単純なセレクターです。ただし、疑似要素は単純なセレクターに似ていますが、単純なセレクターではありません。
:hover
ただし、 1などのユーザーアクション疑似クラスの場合、ユーザーが要素ではなく疑似要素自体を操作したときにのみこのa
効果を適用する必要がある場合、レイアウトに依存するわかりにくい回避策を講じる以外、これは不可能です。テキストで示唆されているように、標準の CSS 疑似要素には現在疑似クラスを含めることができません。その場合は、疑似要素ではなく実際の子要素に適用する必要があります:hover
。
1もちろん、 疑似要素はリンクではないため、これは質問のようなリンク疑似クラスには適用されません。:visited