CODEWITHSUNDEEP
css
aaandy
aaandy

Reputation: 95

CSS: How to select last couple divs with same name?

Below I have some code. I can't change it, it has to be this way. With CSS I want to select the last 5 divs with class form-input-label-block How can I get that done?

..............................................................................

<fieldset>
<div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Spouse" value="Spouse"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Spouse">Spouse</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Mother" value="Mother"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Mother">Mother</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Father" value="Father"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Father">Father</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Child" value="Child"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Child">Child</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Sister" value="Sister"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Sister">Sister</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Brother" value="Brother"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Brother">Brother</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Grandparent" value="Grandparent"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Grandparent">Grandparent</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Friend" value="Friend"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Friend">Friend</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Self" value="Self"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Self">Self</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Aunt" value="Aunt"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Aunt">Aunt</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Uncle" value="Uncle"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Uncle">Uncle</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Cousin" value="Cousin"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Cousin">Cousin</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Partner" value="Partner"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Partner">Partner</label>
</div>
</div><div class="radio-button-container">
<input type="radio" name="river_relationship_radio" id="river_relationship_radio_Other" value="Other"/>
<div class="form-input-label-block">
<label for="river_relationship_radio_Other">Other</label>
</div>
</div>
</fieldset>

Upvotes: 0

Views: 106

Answers (3)

XPLOT1ON
XPLOT1ON

Reputation: 3223

You could use this CSS <SomeTag/SomeClass>:nth-last-child(<Last n>) CSS last n Child

Upvotes: 1

connexo
connexo

Reputation: 56744

Update: This should work for an unknown number of radio boxes. (not tested for less than 5 radio boxes though).

.radio-button-container:nth-last-child(6)~.radio-button-container .form-input-label-block {
  color: red;
}
<fieldset>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Spouse" value="Spouse" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Spouse">Spouse</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Mother" value="Mother" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Mother">Mother</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Father" value="Father" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Father">Father</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Child" value="Child" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Child">Child</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Sister" value="Sister" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Sister">Sister</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Brother" value="Brother" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Brother">Brother</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Grandparent" value="Grandparent" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Grandparent">Grandparent</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Friend" value="Friend" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Friend">Friend</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Self" value="Self" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Self">Self</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Aunt" value="Aunt" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Aunt">Aunt</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Uncle" value="Uncle" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Uncle">Uncle</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Cousin" value="Cousin" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Cousin">Cousin</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Partner" value="Partner" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Partner">Partner</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Other" value="Other" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Other">Other</label>
    </div>
  </div>
</fieldset>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

You can use :nth-child()

.radio-button-container:nth-child(n + 10) {
  background: red;
}
<fieldset>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Spouse" value="Spouse" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Spouse">Spouse</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Mother" value="Mother" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Mother">Mother</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Father" value="Father" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Father">Father</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Child" value="Child" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Child">Child</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Sister" value="Sister" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Sister">Sister</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Brother" value="Brother" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Brother">Brother</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Grandparent" value="Grandparent" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Grandparent">Grandparent</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Friend" value="Friend" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Friend">Friend</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Self" value="Self" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Self">Self</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Aunt" value="Aunt" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Aunt">Aunt</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Uncle" value="Uncle" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Uncle">Uncle</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Cousin" value="Cousin" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Cousin">Cousin</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Partner" value="Partner" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Partner">Partner</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Other" value="Other" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Other">Other</label>
    </div>
  </div>
</fieldset>

or :nth-child with the general sibling selector ~

.radio-button-container:nth-child(9) ~ .radio-button-container {
  background: red;
}
<fieldset>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Spouse" value="Spouse" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Spouse">Spouse</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Mother" value="Mother" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Mother">Mother</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Father" value="Father" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Father">Father</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Child" value="Child" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Child">Child</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Sister" value="Sister" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Sister">Sister</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Brother" value="Brother" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Brother">Brother</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Grandparent" value="Grandparent" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Grandparent">Grandparent</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Friend" value="Friend" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Friend">Friend</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Self" value="Self" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Self">Self</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Aunt" value="Aunt" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Aunt">Aunt</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Uncle" value="Uncle" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Uncle">Uncle</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Cousin" value="Cousin" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Cousin">Cousin</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Partner" value="Partner" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Partner">Partner</label>
    </div>
  </div>
  <div class="radio-button-container">
    <input type="radio" name="river_relationship_radio" id="river_relationship_radio_Other" value="Other" />
    <div class="form-input-label-block">
      <label for="river_relationship_radio_Other">Other</label>
    </div>
  </div>
</fieldset>

Upvotes: 0

Related Questions