疑似クラス、css3セレクタ「:first-child」「:last-child」「:first-of-type」「:last-of-type」
2016-10-06
CSS擬似クラスの説明
◆:first-child
.cts p:first-child
指定した一番最初の要素。他の要素を含める
◆:last-child
.cts p:last-child
指定した一番最後の要素。他の要素を含める
◆:first-of-type
.cts p:first-of-type
指定した一番最初の要素。他の要素を含めない
◆:last-of-type
.cts p:last-of-type
指定した一番最後の要素。他の要素を含めない
-childと-of-typeの違いは、他の要素が含まれるか含まれないか。
<div class=”cts”>
<h1>色</h1>
<p>赤</p>
<p>青</p>
<p>黄</p>
</div>
この場合、
.cts p:first-child
一番最初の要素はh1であるため、この指定をしても何も起きません。適用されません。