CSS　nth-of-typeとnth-child

適当にいじるも仕組みがわからず
あ…ありのまま 今 起こった事を話すぜ
となるのでメモ

３番目以降を非表示にしたい

<div class="jojo">
　　　　　　　　 <h2 class="enemy">DIO</h2>
     <p class="jojo-team">空条承太郎</p>
     <p class="jojo-team">花京院典明</p>
     <p class="jojo-team">ジョセフ・ジョースター</p>
     <p class="jojo-team">モハメド・アブドゥル</p>
     <p class="jojo-team">ジャン・ピエール・ポルナレフ</p>
     <p class="jojo-team">イギー</p>
</div>

敵のDIOはh2タグで強調
敵と主人公だけ表示したい場合

.jojo-team:nth-of-type(n + 3) {
    display: none;
}

jojo-teamの三番目（ジョセフ）以降は非表示となる
↓
DIO
空条承太郎

childとtype

.jojo-team:nth-of-type(4) {
    color: red;
}

●nth-child
異なるタグ(h2)もカウント
↓赤字になるのは
ジョセフ・ジョースター
モハメド・アブドゥル
ジャン・ピエール・ポルナレフ
イギー

●nth-of-type
異なるタグはノーカン(jojo-teamのpタグのみ)
↓赤字になるのは
モハメド・アブドゥル
ジャン・ピエール・ポルナレフ
イギー