複数のul
タグを含むdiv
タグがあります。
最初のul
タグにだけCSSプロパティを設定することができます。
div ul:first-child {
background-color: #900;
}
しかし、最初のul
タグ以外の各ul
タグにCSSプロパティを設定しようとすると、次のようにうまくいきません。
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
どのようにすれば、CSSに "each element, except the first" と書くことができますか?
あなたが投稿したバージョンの1つは、すべてのモダンブラウザ(CSSセレクタレベル3がサポートされている)で[実際に動作][1]します。
div ul:not(:first-child) {
background-color: #900;
}
レガシーブラウザをサポートする必要がある場合や、:not
セレクタの制限(引数として単純なセレクタしか受け付けない)に阻まれている場合は、別の手法を使うことができます。
意図したものよりも大きな範囲を持つルールを定義し、その範囲を意図したものに限定して条件付きで「破棄」します。
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
範囲を限定する場合は、設定する各CSS属性のデフォルト値を使用します。
IE6-8**では:not
は受け入れられませんので、このように提案します。
div ul:nth-child(n+2) {
background-color: #900;
}
つまり、親要素の中にあるすべての ul
を 最初のものを除いて 選ぶのです。
その他の nth-child
の 例 については、Chris Coyer 氏の "Useful :nth-child Recipes" の記事を参照してください。