1. ホーム
  2. css

[解決済み] not:first-child セレクタ

2022-03-21 22:03:29

質問

私は div タグには、複数の ul タグを使用します。

に対してCSSプロパティを設定することができました。 ul タグのみです。

div ul:first-child {
    background-color: #900;
}

しかし、私の以下の試みは、互いにCSSプロパティを設定するものです。 ul タグを除いて、うまくいきません。

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で、"各要素、最初のものを除く"と書くにはどうしたらよいでしょうか。

どのように解決するのですか?

投稿されたバージョンの1つ 実際に動作する は、すべてのモダンブラウザで使用できます。 CSS セレクタレベル3 対応 ):

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属性に対応しています。