Getting every even child of class within variable container

Question

Currently styling a react application where I need to create styling for the following elements but can't seem to figure out a selector which does it properly.

    .FORM__field--50:nth-of-type(even) {
     background-color: red;
    }

<div class='SECTION'>
 <div class='SECTION__title'>Some title</div>
 <div class="FORM__field FORM__field--50">Content</div>
 <div class="FORM__field FORM__field--50">Select this</div>
 <div class="FORM__field FORM__field--50">Content</div>
 <div class="FORM__field FORM__field--50">Select this</div>
 <!-- can go on forever -->
</div>

<div class='SECTION'>
 <div class="FORM__field FORM__field--50">Content</div>
 <div class="FORM__field FORM__field--50">Select this</div>
 <!-- can go on forever -->
</div>

<div class="SECTION">
    <div class='SECTION__title'>some subtitle</div>
 <div class="FORM__field">
  <div class="FORM__field--50">Content</div>
  <div class="FORM__field--50">Select this</div>
  <div class="FORM__field--50">Content</div>
  <div class="FORM__field--50">Select this</div>
  <div class="FORM__field--50">Content</div>
  <div class="FORM__field--50">Select this</div>
  <!-- can go on forever -->
 </div>
</div>

Tried the following css however in the first case for some reason it selects the wrong (odd) of the FORM__field--50 class.

@NenadVracar Was my fault as I created `h1` and `h2` tags which are `div` in the real case, see adjusted question. — NealVDV, May 12 '17 at 20:33
@j08691 again breaks down if there are more `FORM__field--50` then the 2 in the example. — NealVDV, May 12 '17 at 20:37
I think you will need js for this, https://jsfiddle.net/Lg0wyt9u/1900/. — Nenad Vracar, May 12 '17 at 20:42
@NenadVracar you were so close with your fiddle before the jquery, the only issue is that the title is not always present. See updated question (html) — NealVDV, May 12 '17 at 20:44

score 1 · Answer 1 · answered May 13 '17 at 02:07

x:nth-of-type(n) Selects every <x> element that is the nth <x> element of its parent. So with the title present, the first FORM__field FORM__field--50 becomes the 2nd thus the even child. You can just wrap the FORM__field FORM__field--50 inside another div to fix that, if you just want a css fix.

.FORM__field--50:nth-of-type(even) {
  background-color: red;
}

<div class='SECTION'>
  <div class='SECTION__title'>Some title</div>
  <div class="container">
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
  </div>
  <!-- can go on forever -->
</div>

<div class='SECTION'>
  <div class="container">
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
  </div>
  <!-- can go on forever -->
</div>

<div class="SECTION">
  <div class='SECTION__title'>some subtitle</div>
  <div class="FORM__field">
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <!-- can go on forever -->
  </div>
</div>

Note: Since your third group has a FORM__field div, you could use the same for all of the above, if it doesn't introduce additional styles.

.FORM__field--50:nth-of-type(even) {
  background-color: red;
}

<div class='SECTION'>
  <div class='SECTION__title'>Some title</div>
  <div class="FORM__field">
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
  </div>
  <!-- can go on forever -->
</div>

<div class='SECTION'>
  <div class="FORM__field">
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
  </div>
  <!-- can go on forever -->
</div>

<div class="SECTION">
  <div class='SECTION__title'>some subtitle</div>
  <div class="FORM__field">
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <!-- can go on forever -->
  </div>
</div>

Getting every even child of class within variable container

1 Answers1