not：first-childセレクタ

私が持っているdivいくつか含むタグulタグを。

最初のulタグにのみCSSプロパティを設定できます：

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

ただし、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で「最初の要素を除く各要素」を記述するにはどうすればよいですか？

あなたが投稿したバージョンの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属性のデフォルト値を使用します。

このCSS2ソリューション（「ul次々ul」）も機能し、より多くのブラウザーでサポートされています。

div ul + ul {
  background-color: #900;
}

:notおよびとは異なり:nth-sibling、隣接する兄弟セレクターはIE7 +でサポートされています。

ページの読み込み後にJavaScriptがこれらのプロパティを変更する場合は、IE7およびIE8の実装における既知のバグをいくつか確認する必要があります。 このリンクを参照してください。

静的Webページの場合、これは完全に機能するはずです。

IE6-8では:not受け入れられないので、これをお勧めします：

div ul:nth-child(n+2) {
    background-color: #900;
}

したがって、最初のul要素を除いて、親要素のすべてを選択します。

その他の例については、Chris Coyerの「便利な：nth-​​childレシピ」の記事を参照してください。nth-child

div li~li {
    color: red;
}

IE7をサポート

not(:first-child)もう動作しないようです。少なくともChromeとFirefoxの最新バージョンでは。

代わりに、これを試してください：

ul:not(:first-of-type) {}

あなたはで任意のセレクターを使用することができます not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

上記のいくつかには運がありませんでした、

これは実際に私のために働いた唯一のものでした

ul:not(:first-of-type) {}

これは、ページに表示された最初のボタンが左マージンオプションの影響を受けないようにしようとしたときにうまくいきました。

これは私が最初に試したオプションでしたが、うまくいきませんでした

ul:not(:first-child)

セレクターを次の:notように使用できます。:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

:not親セレクターなしでも使用できます。

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

その他の例

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

私が使用しul:not(:first-child)たように完璧なソリューションです。

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

を使用ul:not(:first-child)することで、内部要素にCSSを適用できるので、これが完璧なのはなぜですか。同様にli, img, span, a、タグなど

しかし、他のソリューションを使用した場合：

div ul + ul {
  background-color: #900;
}

そして

div li~li {
    color: red;
}

そして

ul:not(:first-of-type) {}

そして

div ul:nth-child(n+2) {
    background-color: #900;
}

これらはulレベルのCSSのみを制限します。CSS liを `div ul + ul li 'として適用できないとします。

内部レベルの要素の場合、最初のソリューションは完全に機能します。

div ul:not(:first-child) li{
        background-color: #900;
    }

等々 ...