Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

擬似クラスPseudo-classesTOPCSSSelectorPseudo-class

  1. E:linkリンク擬似クラス
  2. E:visitedリンク擬似クラス
  3. E:lang(fr)言語擬似クラス
  4. E:first-child構造擬似クラス
  5. E:activeユーザーアクション擬似クラス
  6. E:focusユーザーアクション擬似クラス
  7. E:hoverユーザーアクション擬似クラス

first-child 構造擬似クラスStructural pseudo-class

書式E[foo|="en"]個別性1
擬似クラスについて

first-child擬似クラスは親要素が内包する子要素のうち、最初の子要素のみをマッチングの対象とします。親要素や子要素の種類は問われません。

擬似クラスの使い方

次に示すような記述パターンが可能です。

E:first-child	{ ... }	任意の親要素を持つ最初のE子要素
:first-child	{ ... }	任意の親要素を持つ最初の子要素
*:first-child	{ ... }	任意の親要素を持つ最初の子要素(上に同じ)

下の例では、div要素を親とする最初の子要素(p要素)をマッチングの対象としています。最初の子要素とは、親要素の先頭タグの直後に記述されている子要素を意味します。

div>p:first-child {color: red;}	div要素の最初に出現するp要素
<div>
	<p>Paragraph…</p>	最初の子要素なので、マッチする
	<p> …</p>
</div>
<div>
	<h2>header…</h2>
	<p>Paragraph…</p>	最初の子要素ではないため、マッチしない
	<p> …</p>
</div>

下の例では、任意の親要素(ここではdiv)の最初の子要素(ul要素)をマッチングの対象としていますが、ul要素はli要素のグループ化要素であるため、指定した内容がli要素へ継承されてしまいます。

ul:first-child {color: red;}	任意の親要素の最初に出現するul要素
<div>
	<ul>			最初の子要素となるul要素
		<li> ... </li>	ulへの指定が継承される
		<li> ... </li>	ulへの指定が継承される
	</ul>
	<ul>
		<li> ... </li>
		<li> ... </li>
	</ul>
</div>
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.