は、CSS
答えて
: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>
あなたは近いですが、<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>
:first-child
は彼らの親の最初の子である要素を選択します。 <p>
は<div>
の3番目の子であるため、動作しません。
ではなく:first-of-type
を使用してみてください:
div p:first-of-type {
border-left: 5px solid #bdc3c7;
}
この段落は最初の子ではありません。
で試してみてください:
div p:first-of-type {
border-left: 5px solid #bdc3c7;
}
あるいは、同じものです:
div p:nth-of-type(1) { ... }
あなたはdiv p:nth-child(3)
を使用するか、またはあなたはそれが動作しますdiv p:first-of-type
いずれかの方法を使用することができます。
:first-of-type
CSS疑似クラスは、兄弟要素のグループの中で、その型の最初の要素を表します。
:nth-child()
CSS疑似クラスは、兄弟グループの中での位置に基づいて1つまたは複数の要素を照合します。
:nth-child()
hereのドキュメント。
:first-of-type
hereのドキュメント
div p:first-of-type {
border-left: 5px solid #bdc3c7;
}
または:nth-child(3)
使用を使用する:
div p:nth-child(3) {
boder-left: 5px solid #bdc3c7;
}
- 1. はCSS
- 2. CSSは -
- 3. は、CSS
- 4. CSSは
- 5. は、CSS
- 6. はCSS
- 7. CSSは:
- 8. は、私はCSS
- 9. フェードは右CSS
- 10. ラウンドキャップはCSS
- 11. はcssクラス
- 12. PhoneGapの:CSSは
- 13. CSS/PHPは
- 14. /in CSSとは?
- 15. CSSアニメーションテキストは
- 16. DataTables CSSはテーブル
- 17. CSSセレクタは、
- 18. CSSプロパティは
- 19. は、CSSマージントップIE7
- 20. は、CSS宣言
- 21. 追加CSSは
- 22. CSSは要素
- 23. CSSは、Herokuの
- 24. 私はCSS
- 25. はCSS位置
- 26. '/' シンボルはCSSで
- 27. CSSプロパティは、IE6
- 28. P5キャンバスは、CSS
- 29. CSSのフォントは
- 30. CSS:それは
ああ
:first-of-type
使用を使用するための。そうですか。ですから、 'p:first-child'の' p'は冗長ですね。 –
正確ではありません。 'p:first-child' _only_は' div'の最初の子が 'p'要素である場合にフォーマットを適用します。これは多くの状況で役立ちます(あなただけではありません) – Sam
いいえ、それは冗長ではありませんが、あなたが思っていることをしていません。それを使わなければ、スタイルはすべてのdivの最初の子に適用されます。あなたがそれを使用するとき、最初の子が 'p'になった場合にのみ、すべての' div'のすべての子に適用されます。詳細な説明と例については、私の編集の回答を参照してください。 –