CSS - 親の下にある最初の要素のセレクタ

Question

特定のdivを使用せずに、以下の "ラベル1"のセレクタを取得するにはどうすればよいですか？私は#wrapper label:first-of-typeがそのトリックをするだろうと思ったが、それはすべてのラベルを選択しているようだ。それが直接の親だ内のすべてのlabelはそれのタイプの最初のあるよう

<div id="wrapper"> 
    <div class="row"> 
     <div class="content-1"> 
      <label>Label 1</label> 
     </div> 
     <div class="content-2"> 
      <label>Label 2</label> 
     </div> 
     <div class="content-3"> 
      <label>Label 3</label> 
     </div> 
     <div class="content-4"> 
      <label>Label 4</label> 
     </div> 
    </div> 
</div> 

Answer 1

#wrapper label:first-of-typeは動作しません。それがここの鍵です。これらのセレクタは、常に直接の親に対して相対的です。

だから、あなたはこのような何かを行うことができます：それは親に

Answer 2

使用n番目の子

#wrapper .content-1:nth-child(1) label{ 
 
background: red; 
 
}

<div id="wrapper"> 
 
    <div class="row"> 
 
     <div class="content-1"> 
 
      <label>Label 1</label> 
 
     </div> 
 
     <div class="content-2"> 
 
      <label>Label 2</label> 
 
     </div> 
 
     <div class="content-3"> 
 
      <label>Label 3</label> 
 
     </div> 
 
     <div class="content-4"> 
 
      <label>Label 4</label> 
 
     </div> 
 
    </div> 
 
</div>