Using Nth Child to Target Every Other Two Divs

:nth-child() issue selecting every second div

You need nth-of-type instead of nth-child. This will only take <div> tags into account, regardless of what is in between of them.

How can I use :nth-child() to select every other div within ALL children?

- Advanced demo with multiThread colored comments
- Simple demo

Ugh this took a while just to understand from OP that "even" / "odd" are actually not the CSS's even and odd but the index of appearance of a .comment div, (nested or not).

CSS? Almost impossible if not even impossible. (possible only with nesting too much styles to cover all possibilities)

With jQuery simply like:

$('.comment').addClass(function(i){
  return i%2 ? "odd" : "even";
});

where i represents the Element's Array Index position (0,1,2,3...) of that .comment element jquery collected on it's way. Now if i reminder 2 returns 0 add the "even" class, else : add the "odd" class to that element.

CSS:

div.comment{
  /* Common styles */
  color:#fff;
  margin:5px;
  border:1px solid #000;
}
.even { background:blue; } /* jQ Index: 0, 2, 4, 6, 8... */
.odd  { background:red;  } /* jQ Index: ...1, 3, 5, 7... */

Style every other div using nth-of-type selector with dividing divs

There is no point in using :nth-of-type() because all your elements are div.

Use :nth-child() with 4n+3 instead.

Selects every fourth element starting at the third.

.divider{  width: 100%;  border-bottom: 1px solid black;}.section{  width: 50%;  height: 10vh;  background-color: lightblue;}.section:nth-child(4n+3){  background-color: lightgreen;  margin-left: 50%;}

<div class="section"></div><div class="divider"></div><div class="section"></div><div class="divider"></div><div class="section"></div><div class="divider"></div><div class="section"></div>

nth-child(1) affect to all DIVs

right not you are testing if container-soc is a first child of anything - which it always is here.

You could check your a tags.

.soc-box a:nth-of-type(1) .container-soc {background-color : red}

<div class="soc-box">  <a href="http://sample.com">      <div class='container-soc'>        <img src="img/tel.svg" class='iconDetails' >        <div class="texti">          <h4>Item 1</h4>        </div>      </div>  </a>  <a href="http://sample.com">     <div class='container-soc'>        <img src="img/twitter.svg" class='iconDetails' >        <div class="texti">          <h4>Item 2</h4>       </div>     </div>  </a><div>

Inject div inbetween two divs using nth-child and .after?

:nth-child(4n) selects the 5th, 9th, 13th, etc. elements. You probably want :eq():

$('.each-brewery-image:eq(3)').after('<div>Test</div>');

:eq() and :nth-child() are zero-indexed, so :eq(0) is the first item, :eq(1) is the second, etc.

Why isn't nth-child() working with other divs?

The :nth-child() selector is considered a pseudo selector that can select elements with a given formula. It selects based on its parent.

• :nth-child(2) Select second occurrence
• :nth-child(even) or nth-child(2n) Select even occurrences
• :nth-child(2n+1) or nth-child(odd) Select odd occurrences

Read more
css-tricks and
MDN

Related selectors

• :nth-of-type
• :nth-last-child()

:nth-child examples:

.nth2th:nth-child(2){
    background-color: #806df9;
}

.odd p:nth-child(odd) {
    background-color: #d387f6;
}

.nth3rd p:nth-child(3n) { 
   background-color: #f86b9d;
}

p{ margin: 0rem; padding: 0.2rem; }
h5{ margin: 2rem 0 0.2rem 0; }

<h5>Select the second occurrence of nth2 class</h5>
<!-- The first .nth2th element will be selected because its the second element of its parent that has the class of .nth2th Its parent is the body element. -->
<p class="nth2th">paragraph 1 | nth-child(2) = selected</p> 
<p class="nth2th">paragraph 2 | nth-child(3)</p>

<h5>Select all odd paragraph</h5>
<!-- Every odd paragraph will be selected because we are targeting all paragraphs inside the .odd container. The selector starts counting from its parent. -->
<div class="odd">
    <p>paragraph 1 | nth-child(1) = odd</p> <!-- selected -->
    <p>paragraph 2 | nth-child(2) = even</p>
    <p>paragraph 3 | nth-child(3) = odd</p> <!-- selected -->
    <p>paragraph 4 | nth-child(4) = even</p>
    <p>paragraph 5 | nth-child(5) = odd</p> <!-- selected -->
    <p>paragraph 6 | nth-child(6) = even</p>
</div>

<h5>Select every 3rd paragraph</h5>
<!-- Every third paragraph will be selected because we are targeting all paragraphs inside the .nth3rd container. -->
<div class="nth3rd">
    <p>paragraph 1 | nth-child(1)</p>
    <p>paragraph 2 | nth-child(2)</p>
    <p>paragraph 3 | nth-child(3)</p> <!-- selected -->
    <p>paragraph 4 | nth-child(4)</p>
    <p>paragraph 5 | nth-child(5)</p>
    <p>paragraph 6 | nth-child(6)</p> <!-- selected -->
    <p>paragraph 7 | nth-child(7)</p>
</div>

nth-child for every two table rows

Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.

So, you'd use 4n and 4n-1, then 4n-2 and 4n-3:

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.

NB disclaimer: Keep in mind that nth-child does not work in IE8. Typical issue, of course.

Alternate style with nth-child

Try changing your odd and even styles to:

.container .bubble:nth-child(2n) {
    background-color: #4a94ed;
    border-color: #4a64ed;
}

.container .bubble:nth-child(4n) {
    background-color: #4df200;
    border-color: #00f23d;
}

Working example: http://codepen.io/JasonGraham/pen/VjYYXd

---

Related Topics