first-child CSS

広告


first-childとは

一番最初に現れる子要素だけを対象にするという意味です。

使い方の一例。
pやh1のmargin-topを一定値とりたい。
でも本文の一番上にくる時はデザインが崩れるから、その時だけmargin-topを0にしたい。

広告


書き方は半角スペースに注意

.entry-content :first-child {margin-top: 0;}

「:first-child」の前の半角スペースの有無で意味が変わってくるので注意。
この場合は.entry-contentクラス内で最初に来る子要素、という意味になる。
セレクタ指定されてないので、子要素がpでもh1でも適用される。

子要素を指定する場合

.entry-content p:first-child {margin-top: 0;}

一番最初に来る子要素がpである場合のみに、適用されるという意味。
このように子要素にセレクタ指定する場合は、「p:first-child」のように半角スペースを入れてはならない。

効かない場合の考えられる理由

  • 半角スペースの有無。
    上述を参照。
  • 子要素にセレクタ指定しても、「指定セレクタで一番最初に来る子要素」という意味にはならない。
  • !importantを忘れた。

nth-child

.entry-content :nth-child(1) {margin-top: 0;}

上のように記述しても同じ効果が得られると思われる。
nth-childは他にも利用方法があり、しかも複雑だ。
そういう意味では、どちらを使用すべきかといえば、単純なfirst-childのほうがいいような気はするが。
後日調べます。

 

備考。
擬似クラス?調査中。

広告