は、CSS

Question

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

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を使用して行うことができますが、何らかの理由で私が動作しません。

どうしたのですか？

Answer 1

: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>

Answer 2

あなたは近いですが、<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>

Answer 3

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

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

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

Answer 4

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

で試してみてください：

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

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

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

Answer 5

あなたは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; 
}