2017-12-31 280 views
3

で最初の子を選択できないことはここで私は最初の段落の左の境界線を持つようにしたい私のコード は、CSS

div p:first-child{ 
 
    border-left: 5px solid #bdc3c7; 
 
}
<div> 
 
    <h3>1 January 2018</h3> 
 
    <h1>This is my first Article</h1> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>
です。この MDNページによると、これは first-childを使用して行うことができますが、何らかの理由で私が動作しません。

どうしたのですか?

答えて

5

:first-childセレクタは、種類に関係なく、その親の最初の子を選択します。 <p>は、親の<div>の3番目の子です。あなたがdiv p:first-childを言うとき、あなたは最初pを選択していない、どのように:first-child作品を明確にするために

div p:first-of-type { 
 
    border-left: 5px solid #bdc3c7; 
 
}
<div> 
 
    <h3>1 January 2018</h3> 
 
    <h1>This is my first Article</h1> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>

EDITを:指定されたタイプの最初の子を選択するには、代わりに:first-of-type使用任意のdivの子。 divの最初の子を選択していますが、その子がpになった場合に限ります。だからそれは追加の制限のようなものです。

以下の例では、:first-childのシアンの背景を使用しました。 2つのタイトルに異なるタイプがあっても適用されていることがわかります。次に、p:first-childの赤い枠線を使用しました。それはpあるので、あなたはそれだけだ。この時間は、2番目のタイトルに適用されていることを確認することができ、そしてそれはpではないので、それは最初のタイトルには適用されませんでした(すなわち、それはh3です):

div :first-child { 
 
    background-color: #0ff; 
 
} 
 

 
div p:first-child { 
 
    border: 1px solid #f00; 
 
}
<div> 
 
    <h3>This is my first Article</h3> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div> 
 
<div> 
 
    <p>This is my second Article</p> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>

+0

ああ:first-of-type使用を使用するための

。そうですか。ですから、 'p:first-child'の' p'は冗長ですね。 –

+1

正確ではありません。 'p:first-child' _only_は' div'の最初の子が 'p'要素である場合にフォーマットを適用します。これは多くの状況で役立ちます(あなただけではありません) – Sam

+1

いいえ、それは冗長ではありませんが、あなたが思っていることをしていません。それを使わなければ、スタイルはすべてのdivの最初の子に適用されます。あなたがそれを使用するとき、最初の子が 'p'になった場合にのみ、すべての' div'のすべての子に適用されます。詳細な説明と例については、私の編集の回答を参照してください。 –

1

あなたは近いですが、<p><div>の最初の子ではありません - <h3>があるので、 <p>first-childによって選択されることはありません。

nth-childを使用して、それを試してみてください。

div p:nth-child(3) { 
 
    border-left: 5px solid #bdc3c7; 
 
}
<div> 
 
    <h3>1 January 2018</h3> 
 
    <h1>This is my first Article</h1> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>

3

:first-childは彼らの親の最初の子である要素を選択します。 <p><div>の3番目の子であるため、動作しません。

ではなく:first-of-typeを使用してみてください:

div p:first-of-type { 
    border-left: 5px solid #bdc3c7; 
} 
1

この段落は最初の子ではありません。

で試してみてください:

div p:first-of-type { 
    border-left: 5px solid #bdc3c7; 
} 

あるいは、同じものです:

div p:nth-of-type(1) { ... } 
1

あなたはdiv p:nth-child(3)を使用するか、またはあなたはそれが動作しますdiv p:first-of-typeいずれかの方法を使用することができます。

:first-of-type CSS疑似クラスは、兄弟要素のグループの中で、その型の最初の要素を表します。

:nth-child() CSS疑似クラスは、兄弟グループの中での位置に基づいて1つまたは複数の要素を照合します。

:nth-child()hereのドキュメント。

:first-of-typehereのドキュメント

div p:first-of-type { 
    border-left: 5px solid #bdc3c7; 
} 

または:nth-child(3)使用を使用する:

div p:nth-child(3) { 
    boder-left: 5px solid #bdc3c7; 
}