子セレクタで最初の型のセレクタを使用できません

Question

.rowの最初のインスタンスを直接親の.page-containerにターゲティングしようとしています。 :first-of-typeセレクタで.rowの最初のインスタンスを正しくターゲティングすることができません。

.page-container > .row:first-of-type { 
 
    background: blue; 
 
}

<div class="page-container"> 
 
    <div class="row">Target This Row</div> 
 
    <div class="row">Don't Target</div> 
 
    <div class="row">Don't Target 
 
    <div class="row">Don't Target</div> 
 
    </div> 
 
</div>

私は.page-containerの直系の子孫である.rowの最初のインスタンスのみを対象と助けてください。

Answer 1

だと思います。

問題が:first-of-typeは、具体的最初の-この型オブ要素を意味し、それができない（としない）クラスに適用することです。

クラスに適用されるセレクタを持つために、我々は:first-of-classまたは（何選択することができます - クラスを含む）を - :first-of-queryのいずれかを必要としないだろうと、これまでのところ、どちらも存在します。意味

.page-container div:first-of-type.row 

： - しかしだけそれ もクラス.rowを持つことが起これば

最初divが.page-container内にネスト

は、結果的に、あなたはこのようなものが必要。

Answer 2

私が何をしたいが、私は比較的最近、この問題に出くわしました

.page-container > .row:first-child { 
    background: blue; 
} 

Answer 3

私は通常、クラスまたはIDをすべて無視し、タグ名に集中します。それが広すぎる場合は、classまたはidを親に追加することで絞り込みます。

div > div:first-of-type { 
 
    background: blue; 
 
} 
 
div.page-container > div:first-of-type { 
 
    border: 3px solid red; 
 
} 
 
p:first-of-type { 
 
    color: blue 
 
} 
 
p:last-of-type { 
 
    color: red; 
 
}

<p>Example #1 in blue background</p> 
 
<p>Example #2 in red border</p> 
 
<div class="page-container"> 
 
    <div class="row">Target This Row</div> 
 
    <div class="row">Don't Target</div> 
 
    <div class="row">Don't Target 
 
    <div class="row">Don't Target</div> 
 
    </div> 
 
</div>