first-child擬似クラス

TOPページに戻る > CSS

スポンサード リンク

first-child擬似クラス

何かの要素の中に入っている最初の要素のスタイルを変更できます

※ie6は、first-child擬似クラスに対応していません(ie7から使えます)

使い方(書式)
要素名:first-child { プロパティ : 値 }
対応ブラウザ ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

実際の指定方法

cssファイル

li:first-child {
  border-bottom: 1px solid blue; /* 1つ目のli要素のスタイルが:first-childで変更されます */
}

li {
  border-bottom:1px solid brown; /* 他のリスト項目 */
}

html部分

<ul>
 <li>1つ目リスト項目</li> /* 1つ目のli要素のスタイルが:first-childで変更されます */
 <li>2つ目リスト項目</li> /* 他のリスト項目 */
 <li>3つ目リスト項目</li> /* 他のリスト項目 */
</ul>

実際の表示

ie6、以外のブラウザで確認してください

要素を属性セレクタ、classセレクタ、idセレクタで絞り込む


first-child擬似クラスはセレクタと併用できます 適用箇所を限定したい場合は最初の要素にclassセレクタ、idセレクタ、属性セレクタをつけます(今回はclassセレクタで)
※html要素に属性がついている場合は属性セレクタが使えるのでソースがすっきりします

cssファイル

li.hoge:first-child {
  border-bottom: 1px solid blue; /* 1つ目のli要素のスタイルが:first-childで変更されます */
}

li {
  border-bottom:1px solid brown; /* 他のリスト項目 */
}

html部分

<ul>
 <li class="hoge">1つ目リスト項目 first-childでスタイルが変更</li>
 <li>2つ目リスト項目 他のリスト項目brown</li>
 <li>3つ目リスト項目 他のリスト項目brown</li>
</ul>



(C)2012 ホームページ作成無料