CSS :first-child Selector
例
親の最初の子であるすべての<p>要素を選択してスタイルを設定します。
p:first-child
{
background-color: yellow;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
:first-child
セレクターは、指定されたセレクターがその親の最初の子である場合にのみ、それを選択するために使用されます。
バージョン: | CSS2 |
---|
ブラウザのサポート
表の数字は、セレクターを完全にサポートする最初のブラウザーのバージョンを示しています。
Selector | |||||
---|---|---|---|---|---|
:first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
CSS構文
:first-child {
css declarations;
}
その他の例
例
すべての<p>要素のすべての<i>要素を選択してスタイルを設定します。ここで、<p>要素はその親の最初の子です。
p:first-child i
{
background: yellow;
}
例
リストの最初の<li>要素を選択してスタイルを設定します。
li:first-child
{
background: yellow;
}
例
すべての<ul>要素の最初の子要素を選択してスタイルを設定します。
ul > :first-child
{
background: yellow;
}
関連ページ
CSSチュートリアル:CSS疑似クラス