:first-childが効かない原因は子要素の構造にある
コーダーのオッコです。
<div>
<h2>hogehoge</h2>
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
<p>dddd</p>
</div>こういったコードの、aaaaだけ色を変えたい場合に、cssはどのように書いたらいいでしょうか？
答えはこうです。
(style.css)
div p:first-of-type {
color:red;
}以下のようにやりがちだと思うのですが、first-childは子要素のうち最初の子を見に行くので、効いてくれません。
(style.css)
/* やりがちだけど効かない記述 */
div p:first-child {
color:red;
}『divの中の最初の子要素は……pタグじゃないね！無視！』ということですね。
まとめると、
- first-childは「最初の子要素」
- first-of-typeは「指定したタグのうち、最初の子要素」
liタグ等、用途が限定されているタグを使っているとなかなか出くわさない悩みですが、いざというとき便利なので覚えておきましょう！
システム開発はアピステクノロジーへ
アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。
「IT TOOL」をご存じですか？
既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。
さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。
実績多数、低価格で本格的なサイトができると好評いただいております。
詳しくは弊社HPをご覧ください。
アピステクノロジーの実績紹介はこちら
ITツール紹介ページはこちら
