ywork2020.com

Title

兄弟要素の先頭の要素を検知する

目次 (INDEX)

:first-childとは

ここで説明する:first-child とは次の語句からなるCSSの疑似クラスです。
first
読み: ファースト
意味: 最初の、先頭の
child
読み: チャイルド
意味: 子、子供

目次に戻る

:first-child疑似クラスの概要

この疑似クラスはセレクタに該当する要素の兄弟要素グループから先頭にある要素を検知して一時的なプロパティ値の変更を行います。

例えばp:first-childとした場合、兄弟要素の先頭あるp要素を指定したことになります。 説明の補足としては、この:first-childは先頭にp要素がない場合にはプロパティは適用されません。 あくまでも子要素の先頭にp要素があることが前提です。 pを指定しない場合は暗黙的に(*)ユニバーサルセレクターを指定したことになり、兄弟要素の全てをグループとして指しているので、 単純に先頭の要素ということになります。

この疑似クラスを使ったプロパティ値の設定はあくまでも一時的な値の設定であり、 プログラムなどによる要素の追加や削除で最初の要素が変更された場合には、それに準じた処理が行われます。

類似した疑似クラスとして :first-of-type があります。 非常に似ていますが、明らかに動作が違いますので状況により、使い分けてください。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。 

セレクター:first-child{プロパティ名: 設定値;}
:first-child{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素に:first-child疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。

目次に戻る

参考: 兄弟要素の先頭の要素を検知する

ここではシンプルに兄弟要素の先頭にあるp要素の背景色を変更するサンプルを見て下さい。 また先頭にp要素が無い場合にはプロパティが適用されていないことにも着目してください。

このサンプルではdiv要素の子要素であるp要素を対象に:first-childを使っています。 このサンプルの場合だと上段のdiv要素の兄弟要素にはp要素しかありませんので、特にp要素に限定する必要はありません。実際はp:first-childでなくても :first-childとしても構わないということになります。 しかし、下段のdiv要素には兄弟要素の中にbr要素も含まれています。この要素構成でのプロパティの適用の違いが着目点となります。

:first-childとした場合には暗黙的に(*)ユニバーサルセレクタを指定したことになりますから *:first-childと指定したことと同じになります。 

<body>
	<div><p>これは段落です。</p><p>これは段落です。</p></div>
	<div>これは改行です。<br><p>これは段落です。</p></div>
</body>


これは段落です。

これは段落です。

これは改行です。

これは段落です。

 

<style>
	div{
		border: thin dashed currentColor;
	}
	div p{
		margin: 5px;
	}
	div p:first-child{
		background-color: ##lightpink;
	}
</style>

目次に戻る

参考: 兄弟要素の中で最初の疑似要素を検知することはできない

ここでは一つのアイディアとして兄弟要素の中の先頭に疑似要素を挿入し、その疑似要素にCSSスタイルを適用してみようと思います。 しかし、実際には:first-childでは疑似要素を要素として認識できませんので、 サンプルでは::before疑似要素を使ってb要素の中に疑似要素を挿入しています。 

<body>
	<ul>
		<li><b></b>List Item</li>
		<li><b></b>List Item</li>
		<li><b></b>List Item
			<ul>
				<li><b></b>List Item</li>
				<li><b></b>List Item</li>
				<li><b></b>List Item</li>
			</ul>
		</li>
		<li><b></b>List Item</li>
		<li><b></b>List Item</li>
		<li><b></b>List Item</li>
	</ul>
</body>

  • List Item
  • List Item
  • List Item
    • List Item
    • List Item
    • List Item
  • List Item
  • List Item
  • List Item
 

<style>
	ul{
		list-style: none inside;
		counter-reset: liCount;
	}
	ul li{
		line-height: 3em;
		counter-increment: liCount;
	}
	ul li b::before{
		content: counter(liCount);
	}
	ul li b:first-child{
		display: inline-block;
		margin-right: 1em;
		padding: 3px;
		width: 2em;
		border-radius: 50%;
		text-align: center;
		background-color: ##lightpink;
	}
</style>

目次に戻る