ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

:first-childの利用

:first-childの使い方

:first-childとは疑似クラスの1つで、「特定の要素の中に初めて出てくる要素や子要素」にスタイルを適用させることができます。

なんだか複雑で小難しいですね…。
わかりやすいように、例を用意してみました。下記文書をご覧ください。

<p>私が好きなThinkPadのお話</p>
<p>旧IBM、LenovoのThinkPadは神奈川県みなとみらいの大和研究所で研究・開発されています。</p>
<p>過酷なテスト(いわゆる拷問テスト)をクリアした、堅牢性への妥協のないこだわりを持つ製品です。</p>

この中で<p>は3つ出てきますが、:first-childを使えば一番最初の要素、つまり最初の<p>にだけスタイルを適用させることができます。他の<p>にはスタイルを適用しません。

最初のpにだけスタイルを適用

:first-childの具体的な使用例

さきほどの文書に、:first-childを使ってスタイルを適用してみます。

[CSSの記述例]
p:first-child {
color:#F00;  ← 赤色
}
[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>:first-childの利用</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<p>私が好きなThinkPadのお話</p>
<p>旧IBM、LenovoのThinkPadは神奈川県みなとみらいの大和研究所で研究・開発されています。</p>
<p>過酷なテスト(いわゆる拷問テスト)をクリアした、堅牢性への妥協のないこだわりを持つ製品です。</p>

</body>
</html>

これをブラウザで確認してみると、以下のよう表示されます。

:first-childを適用した図

このように:first-childは、「特定の要素の中に初めて出てくる要素や子要素」にだけ、スタイルを適用することができます。

覚えておきたいポイント

初めて出てくる要素に適用される

例では<p>を挙げていますが、<li>や<span>でも、「特定の要素の中に初めて出てくる要素や子要素」であればスタイルが適用されます。

:first-lineの利用
« 前のページへ 疑似セレクタとは?

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。