:first-child擬似クラス …… 最初に現れる子要素にスタイルを適用する
広告
:first-child擬似クラスは、ある要素内で最初に現れる子要素を対象にスタイルを適用します。
例えば、リストの最初の項目だけとか、いくつかある段落のうち、最初の段落だけにスタイル指定する場合などに使用します。
E:first-childは、
E:nth-child(1)
を指定した場合と同じ動作となります。
- 書式
- 要素名:first-child {プロパティ名:値;}
- 適用対象
- 要素内の最初の子要素
h2:first-child {background-color:#00ccff;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div>
<h2>今日のお天気</h2>
<p>今日は<strong>晴れ</strong>です。</p>
<h2>明日のお天気</h2>
<p>明日は<strong>雨</strong>です。</p>
</div>
</body>
</html>
↓↓↓
今日のお天気
今日は晴れです。
明日のお天気
明日は雨です。
広告