大阪のホームページ制作会社。SEO対策、企画提案も。関西でドローン事業も行っております。

  • 株式会社エボルワン
  • 株式会社エボルワン
  • 株式会社エボルワン

ハッシュタグ「#evoluone」でインスタ投稿!

2018.4.13

疑似クラスfirst-childとfirst-of-typeの使い分け

こんにちは。

 

HTMLを汚さずにcssを適用することができる、便利な疑似クラス。

first-childとfirst-of-typeを使う際、
「この場合どっちだっけ?」となりがちなので調べました。

 

<div>
<p>1番目のp</p>
<h3>1番目のh3</h3>
<p></p>
<p></p>
</div>

 

1番目のpを指定する

div p:first-childと
div p:first-of-type
どちらでも適用されます

 

1番目のh3を指定する

div h3:first-childでは適用されず
div h3:first-of-typeでは適用される

まとめると

○:first-childは、【最初の子要素が○要素だった場合】に適用される。
○:first-of-typeは【○要素だけをカウント】してcssを適用できる。

 

WEB制作のご依頼はCLICK!

Facebookで共有する
0
はてなブックマークで共有する
0
twitterで共有する
0
Google+で共有する
0
MENU