デザイン全般

[css]first-childの使い方

[css][/css]first-childの使い方

本日はfirst-childの使い方について記述致します。
リストメニューでよく使っていたのですがいまいちわかってなかったので
改めて書きました。

first-childとは?

:first-child擬似クラスは、ある要素内で最初に現れる子要素を対象にスタイルを適用します。

使い方

書式 要素名:first-child {プロパティ名:値;}
適用対象 要素内の最初の子要素

例)html
[html]
<div id="content">
<h1>タイトル</h1>
<p>文章</p>
<h1>タイトル</h1>
<p>文章</p>
<h1>タイトル</h1>
<p>文章</p>
</div>
[/html]

css

[css]
#content:first-child{
color:#f00;
}
[/css]

表示例

タイトル

文章

タイトル

文章

タイトル

文章

以上のようになります。

是非参考にしてみてください。