1. アドベネック
  2. アドベネックのブログ
  3. HTML
  4. 擬似クラス「:first-child」が効かない?と思ったら

Posted on Jul 14, 2016 by Naitou

擬似クラス「:first-child」が効かない?と思ったら

記事カテゴリー: HTML

cssでfirst-childを指定したはずなのに、思うようにレイアウトに反映されない…という事を過去に何度か繰り返したので、備忘録として書いておきます。

想定するレイアウトは以下のような見出し+文章です。

css_fc_1

id=”textBox”内のp要素に対し、margin-topを5px付けたい、
最初のp要素だけmargin-topを20px付けたい。
ここで親要素id=”textBox”内の最初のp要素という記述で「:first-child」を使ったとします。

css_fc_2

効いて無い…?

そもそも「:first-child」とは

ある要素の中の最初の要素を指定する擬似セレクタです。

今回の例ではある要素:id=”textBox”です。

なぜ「:first-child」が効いていないのか

p要素が「ある要素の中の最初の要素」では無いからです。
例ではid=”textBox”の最初の子要素はh2要素です。
つまり「#textBox p:first-child」という要素は最初から存在していないのです。

css_fc_3

どうやって「最初のp要素」を指定するのか

例に挙げたhtmlでは、擬似クラス「:first-child」を使って最初のp要素にのみスタイルを適用するのは難しいという事が分かりました。
「最初のp要素」にのみスタイルを適用するには以下のような方法があります。

隣接セレクタ「+」を使う

隣接セレクタを使うと「ある要素の次に来る兄弟要素」を指定出来ます。
例では最初のp要素はh2要素の次に来るので「h2 + p」で最初のpにのみスタイルを適用する事が出来ます。

css_fc_4

「:nth-child(n)」を使う

「:nth-child(n)」はn番目の要素にのみスタイルを適用する擬似セレクタです。
例では最初のp要素は2番目にあるので、「:nth-child(2)」で最初のpにのみスタイルを適用する事が出来ます。

css_fc_5

「:nth-of-type(n)」を使う

「:nth-of-type(n)」は要素の内n番目にある要素にのみスタイルを適用する擬似セレクタです。

「:nth-child(n)」と何が違うのか、

「:nth-child(n)」は全ての要素からn番目の要素にのみスタイルを適用しますが、
「:nth-of-type(n)」は指定した要素からn番目の要素にのみスタイルを適用します。

css_fc_6

この記事をシェアする

このカテゴリーの一覧に戻る

内藤

この記事の投稿者

内藤Naitou

高専、専門学校卒という独学派が多いアドベネックの中で唯一コンピューター言語を学校で学んだスタッフでありながら、ペンタブレットを使ったイラスト作成なども担当できるレアキャラ。NINTENDO好き。ゲームを買って積んでおくのが趣味。

  • Ps
  • Ai
  • Dw

同じカテゴリーの投稿

最近の投稿

記事のカテゴリー

アドベネックのSNS