web-dev-qa-db-ja.com

最初の子をスキップするには？

<div id="main">    
  <p> one </p>    
  <p> two </p>
  <p> three </p>
  <p> four </p>
  <p> five </p>
<div>

最初の<p>One</p>にCSSを適用したくない

p {color:red}

:first-childの正反対が必要です。

csscss-selectors
45
Jitendra Vyas

否定擬似クラス の場合：

p:not(:first-child) { color: red; }

ブラウザのサポートは 非常に強力 になりましたが、代替手段は次のとおりです。

p { color: red; }
p:first-child { color: black; }

そして：

* + p { color: red; }
79
Quentin

Quentinの:not()ソリューションは、最新のブラウザーに最適です。

p:not(:first-child) { color: red; }

古いブラウザ用の彼の代替もうまく機能しますが、それは最初の子のオーバーライドルールを使用します。 requiredではありませんが、...

兄弟セレクターを使用するだけで、上記のルールと同じルールを適用できます。p:first-child。これらのルールのいずれかが機能します。

ここでは両方のコンビネータが同じように機能します。それらの微妙な違いは、ミックスに他の要素がある場合にのみ適用されます。詳細については、提供されているリンクを参照してください。

22
BoltClock

:nth-child()がうまくいくと思います。

p:nth-child(n+2){
  background-color:red;
}

これは、2番目の子で始まるため、最初のタグを除くすべてのpタグのスタイルを設定します。次に、最初のpタグをp:first-childで個別にスタイルできます。

13
jjgarza

毎回機能し、元に戻す必要はありません：

p + p {
  /* do 15 special things */
}

Pが先行するすべてのPが必要です。後で元に戻すためにプロパティを設定しないでください。あなたがそれを助けることができるならば、あなたはそれを加えるべきで、引くことではありません。

6
Rudie

「チルダ」（〜）演算子も使用できます

<!DOCTYPE html>
<html>
<head>
    <style> 
    p ~ p {
        background:#ff0000;
        }
    </style>
</head>
<body>

    <h1>This is a heading</h1>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>


</body>
</html>

ここにJSFiddleデモがあります http://jsfiddle.net/RpfLa/344/

FF 17でクイックテストを行いましたChrome 23、Safari 5.1、IE9、IE1-8、互換モードで

2
MonteCristo

:nth-child(1n+2)はうまく機能しました。これは最初の子をスキップし、残りの要素に続きます。

p:nth-child(1n+2){
  color: red; 
}

お役に立てれば。

0
Alfredo Barillas