web-dev-qa-db-ja.com

複数のCSS擬似クラス

複数の擬似クラスをセレクターに適用するための適切なCSS構文は何ですか。リスト内の最後の項目を除く各項目の後に「、」を挿入したいと思います。私は次のCSSを使用しています：

ul.phone_numbers li:after {
    content: ",";
}

ul.phone_numbers li:last-child:after {
    content: "";
}

これはFF3、ChromeおよびSafari 3で正常に動作します。IE7は：after（予想どおり）をサポートしていないため動作しません。InIE 8これは、最後の1つを含む各liの後にコンマで表示されます。これはIE8の問題ですか、それとも構文が間違っていますか？IE8で機能しない場合でも問題ありませんが、適切な構文を知りたいのですが。

csssyntax
39
Brian Fisher

:last-childは擬似クラスですが、:after（またはCSS3では::after）は擬似要素です。

標準 を引用するには：

擬似クラスはセレクタのどこでも許可されますが、擬似要素はセレクタの最後の単純なセレクタの後にのみ追加できます。

これは、CSS2.1および CSS3も同様 に従って構文が正しいことを意味します。

52
Christoph

隣接する兄弟セレクター を使用できます。

ul.phone_numbers li + li:before {
   content: ",";
}
8
Gumbo

これを回避するには、<li/>内に別のタグを配置し、代わりに:afterを適用します。そうすれば、:last-childと:afterを異なる要素に適用できます。

ul.phone_numbers li > span:after {
    content: ",";
}

ul.phone_numbers li:last-child > span:after {
    content: "";
}
3
DonutReply

適用されるルールがDOMツリーの特定の要素に一致する限り、擬似クラスセレクターのネストに問題はありません。 w3 website の擬似クラスセレクターを使用して、スタイリングの可能性をエコーし​​たいと思います。つまり、次のようなこともできるということです。

.ElClass > div:nth-child(2):hover {
    background-color: #fff;
    /*your css styles here ... */
}
2
big kev

IE8は最後の子をサポートしていません：（CSS 2.1サポートの整理に焦点を当てています。MicrosoftがGeckoやWebkitをまだ採用していない理由はわかりません。

http://msdn.Microsoft.com/en-us/library/cc351024（VS.85）.aspx＃pseudoclasses

1
roborourke