要素数に基づくCSS3セレクタ

Question

兄弟の数に基づいて要素を選択する方法はありますが、いくつかの方法を試してみました。

例えば

私は2つの形態があり、私は回数に基づいて幅の.radio行列のスタイルをしたいものは3つのラベル.radio行列を持ち、もう一方は5 を持っていること.form-matrixに表示されます。

誰かが私を助けることができますか？ ありがとうございました:)

<div class="form-matrix"> 
 
          
 
    <label class="control-label col-md-3"><p>Escolha um lado</p></label> 
 

 
    <div class="col-md-9"> 
 
    
 
     <label class="label-matrix"> 
 
      <p>Esquerdo</p><input class="radio-matrix"> 
 
     </label> 
 

 
     <label class="label-matrix"> 
 
      <p>Direito</p><input class="radio-matrix"> 
 
     </label> 
 

 
     <label class="label-matrix"> 
 
      <p>N/A</p><input class="radio-matrix"> 
 
     </label> 
 

 
    </div> 
 
</div> 
 

 
<div class="form-matrix"> 
 
          
 
    <label class="control-label col-md-3"><p>Escolha um lado</p></label> 
 

 
    <div class="col-md-9"> 
 
    
 
     <label class="label-matrix"> 
 
      <p>Esquerdo</p><input class="radio-matrix"> 
 
     </label> 
 

 
     <label class="label-matrix"> 
 
      <p>Direito</p><input class="radio-matrix"> 
 
     </label> 
 

 
     <label class="label-matrix"> 
 
      <p>N/A</p><input class="radio-matrix"> 
 
     </label> 
 

 
     <label class="label-matrix"> 
 
      <p>N/A</p><input class="radio-matrix"> 
 
     </label> 
 
     
 
     <label class="label-matrix"> 
 
      <p>N/A</p><input class="radio-matrix"> 
 
     </label> 
 

 
    </div> 
 
</div>

Answer 1

次のことを試してみてください。

.label-matrix:first-child:nth-last-child(5) ~ .label-matrix { 
 
    color:red; 
 
} 
 
.label-matrix:first-child:nth-last-child(3) ~ .label-matrix { 
 
    color:blue; 
 
}

<div class="form-matrix"> 
 

 
    <label class="control-label col-md-3"> 
 
    <p>Escolha um lado</p> 
 
    </label> 
 

 
    <div class="col-md-9"> 
 

 
    <label class="label-matrix"> 
 
     <p>Esquerdo</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>Direito</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>N/A</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    </div> 
 
</div> 
 

 
<div class="form-matrix"> 
 

 
    <label class="control-label col-md-3"> 
 
    <p>Escolha um lado</p> 
 
    </label> 
 

 
    <div class="col-md-9"> 
 

 
    <label class="label-matrix"> 
 
     <p>Esquerdo</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>Direito</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>N/A</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>N/A</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    <label class="label-matrix"> 
 
     <p>N/A</p> 
 
     <input class="radio-matrix"> 
 
    </label> 
 

 
    </div> 
 
</div>