CSS3 selector based on number of elements

Question

I know there's a way to select elements based on the number of siblings by I tried several methods without success.

For example I have 2 forms, one has 3 labels .radio-matrix and the other has 5. I want to style the width of .radio-matrix based on the number of times it appears in .form-matrix.

Can somebody help me? Thank you :)

<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>

Your .radio-matrix elements are all nested in labels, which makes this non-trivial. Unless you assume every such label always contains a .radio-matrix, in which case you can just style the inputs based on the number of labels instead. — BoltClock, May 31 '17 at 13:10
You're so right BoltClock! I actually wanted to style the **labels .label-matrix**, not the input .radio-matrix — Tiago Ramos, May 31 '17 at 13:13
Googled a bit and found [this](http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/). — Code4R7, May 31 '17 at 13:18

score 0 · Answer 1 · answered May 31 '17 at 13:18

Try the following:

.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>

CSS3 selector based on number of elements

1 Answers1