English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:first-child CSS 修飾子-class は兄弟要素グループの中で最初の要素を示します。
匹配 <p> の親要素の最初の <p> 要素
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本チュートリアル(oldtoolbag.com)</title>
<style>
p:first-child
{
background-color:orange;
}
</style>
</head>
<body>
<p>本文の最初のパラグラフ.</p>
<h1>ウェルカム 私の個人ページ</h1>
<p>このパラグラフは親の最初の子供ではありません</p>
<div>
<p>これはDiv内に含まれる最初のパラグラフです.</p>
<p>これは最初のパラグラフではありません.</p>
</div>
<p><b>注意:</b> :first-childはIEに影響を与えます8およびより古いバージョンのブラウザでは、DOCTYPEは既に宣言されています.</p>
</body>
</html>テストを見てみる ‹/›:first-child選択子は、親要素内の最初の子要素に一致します。
テーブルの数字は、その属性をサポートする最初のブラウザバージョン番号を示します。
| 選択子 | |||||
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
注意: :first-childはIEに影響を与えます8およびより古いバージョンのIEバージョンでは宣言する必要があります!DOCTYPE
CSS チュートリアル: CSS 仮類
各 <p> 内の各 <i> 要素を選択し、そのスタイルを設定します。その <p> 要素は親要素の最初の子要素です：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本チュートリアル(oldtoolbag.com)</title>
<style>
p:first-child i
{
background:yellow;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> :first-childはIEに影響を与えます8およびより古いバージョンのブラウザでは、DOCTYPEは既に宣言されています.</p>
</body>
</html>テストを見てみる ‹/›リストの最初の <li>要素を選択するスタイル：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本チュートリアル(oldtoolbag.com)</title>
<style>
li:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<p><b>注意:</b> :first-childはIEに影響を与えます8およびより古いバージョンのブラウザでは、DOCTYPEは既に宣言されています。</p>
</body>
</html>テストを見てみる ‹/›各<ul>要素の最初の子要素を選択するスタイル：:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本チュートリアル(oldtoolbag.com)</title>
<style>
ul>:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p><b>注意:</b> :first-childはIEに影響を与えます8およびより古いバージョンのブラウザでは、DOCTYPEは既に宣言されています。</p>
</body>
</html>テストを見てみる ‹/›