:first-child

:first-childは、親要素にとって第一番目の直下要素のみを対象とする擬似クラス
適用対象：要素内の最初の子要素

▼HTML　この場合は【:first-child】は効く

<div class="sample sample1">
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

<p>1つ目のpタグ</p>

<p>2つ目のpタグ</p>

<p>3つ目のpタグ</p>

</div>

▼CSS

.sample1 p:first-child{
color:#ff0000;
font-weight:bold;
}

.sample1 p:first-child{

color:#ff0000;

font-weight:bold;

}

▼HTML　この場合は【:first-child】は効かない

<div class="sample sample2a">
<h1>なんかしらのタイトル</h1>
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

<h1>なんかしらのタイトル</h1>

<p>1つ目のpタグ</p>

<p>2つ目のpタグ</p>

<p>3つ目のpタグ</p>

</div>

▼CSS

.sample2a p:first-child{
color:#ff0000;
font-weight:bold;
}

.sample2a p:first-child{

color:#ff0000;

font-weight:bold;

}

【 :first-of-type 】なら、指定した要素の前にどんなタグがあっても効く。
※ブラウザ実装状況はIE9からになります。

参考サイト：https://goma.pw/article/2015-02-06-0/

target=”_blank”

dropdown-menu