#16 n番目に来る要素を指定する

#16 n番目に来る要素を指定する #14 キーフレームでアニメーション (2)

子要素のうち、n番目にくる要素にスタイルをあてる方法について解説していきます。

nth-child（ ）：かっこの中に数字やodd（奇数）、even（偶数）3n（3の倍数番目）等の指示もできます。

first-child・last-child・only-childという指示もあります。

CSS3

<style>
 　　 div p：nth-child(2)｛
           color:red
       }
 </style>        

HTMLでは

<div>
    <h1>大見出し</h1>
    <p>こんにちは</p>
    <p>こんにちは</p>
    <p>こんにちは</p>
    <h2>中見出し</h2>
    <p>こんにちは</p>
    <p>こんにちは</p>
    <h2>中見出し</h2>
    <p>こんにちは</p>
    <p>こんにちは</p>
    <p>こんにちは</p>
    <p>こんにちは</p>
</div>

ブラウザ上では

大見出し

こんにちは

こんにちは

こんにちは

こんにちは

以下略・・・と、<div＞塊の子要素の2番目が赤くなります。