web-dev-qa-db-ja.com

not：first-child selector

いくつかの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で書くことができますか： "最初の要素を除く各要素"？

csscss-selectors
647
OTAR

あなたが投稿したバージョンの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属性ごとに デフォルト値 を使用してください。

1135
Jon

このCSS2の解決方法（ "他のulの後に任意のul"）も機能し、より多くのブラウザでサポートされています。

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

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

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

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

137
Alex Quinn

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

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

それで、あなたはその親要素最初のものを除くの中のすべてのulを選びます。

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

65
ed1nh0
div li~li {
    color: red;
}

IE7をサポート

15
zloctb

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

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

ul:not(:first-of-type) {}
5
Vinny Troia

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)){}
3
user11246010

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

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

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

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

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

ul:not(:first-child)

3
newtron54

私が使ったように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;
    }

等々 ...

0
Gufran Hasan

:not()の中で任意のセレクタを使うことができるように、:notでセレクタを使うことができます

any_CSS_selector:not(any_other_CSS_selector){
    /*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*/
}
0
Nasser