css3 rotation with nth-child doesnt work as expected

  1. I have a guestbook.
  2. I would like to rotate every 1st post(-0.7deg) and every 2nd .post(0.7deg)

  3. The .chain has only a background-image.

  4. When there’s no .chain div, it works with .post:nth-child(2n+1)
  5. With this css i can only rotate all in the same direction.
  6. I tried everything, but it doesn’t work. Please help me.

enter image description here

The html:

<form></form>
<div class="chain"></div>
<article class="post">
  <h3>Peter Parker</h3>
  <span class="time">2014.03.17 18:53</span>
  <span class="message">This is a nice page.</span>
  </article>
  <div class="chain"></div>
  <article class="post">
  <h3>John Smith</h3>
  <span class="time">2014.03.17 18:00</span>
  <span class="message">Hi! My name is John</span>
</article>

The css:

.post{
  border: 30px solid transparent;
  border-image:url("stb/border.png") 45 45 45 45 repeat stretch;
  border-width:20px 20px 20px 20px;
  -moz-border-image:url("stb/border.png") 45 45 45 45 repeat stretch;
  -webkit-border-image:url("stb/border.png") 45 45 45 45 repeat stretch;
  border-image-outset: 10px;
  background-color:#fffcd6;
  text-align:center;
}
.chain{
  margin:0 auto;
  height:30px;
  width:30px;
  min-width:30px;
  min-height:30px;
  background: url('stb/lanc.png');
  background-repeat: repeat-y;
  background-position: center center;
}
.post:nth-child(4n+3) .post:nth-child(4n+4){
  -ms-transform:rotate(0.7deg);
  -webkit-transform:rotate(0.7deg);
  transform:rotate(0.7deg);
}
.post:nth-child(4n+1) .post:nth-child(4n+2){
  -ms-transform:rotate(-0.7deg);
  -webkit-transform:rotate(-0.7deg);
  transform:rotate(-0.7deg);
}

I tried this one too:

.chain:nth-child(odd) .vk:nth-child(odd){
  -ms-transform:rotate(0.7deg);
  -webkit-transform:rotate(0.7deg);
  transform:rotate(0.7deg);
}

solution

You need commas between the selectors. You were using the descendant combinator.

EXAMPLE HERE

.post:nth-child(4n+3), .post:nth-child(4n+4){
 /* ^ */
  -ms-transform:rotate(0.7deg);
  -webkit-transform:rotate(0.7deg);
  transform:rotate(0.7deg);
    }
.post:nth-child(4n+1), .post:nth-child(4n+2){
/* ^ */
  -ms-transform:rotate(-0.7deg);
  -webkit-transform:rotate(-0.7deg);
  transform:rotate(-0.7deg);
}

You could probably simplify this and use :nth-child(even)/nth-child(odd). This, however, wouldn’t work because of the <div class="chain"></div> elements. You could therefore replace them with pseudo elements (:before/:after) like this:

EXAMPLE HERE

.post:nth-child(even) {
  -ms-transform:rotate(2deg);
  -webkit-transform:rotate(2deg);
  transform:rotate(2deg);
}
.post:nth-child(odd) {
  -ms-transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
  transform:rotate(-2deg);
}
.post {
  /* other styling.. */
  position:relative;
}
.post:after {
  content:'';
  position: absolute;
  height: 30px;
  width: 30px;
  background: url('//placehold.it/10x200');
  background-repeat: repeat-y;
  background-position: center center;
  left: 50%;
  top: 100%;
  margin-left: -15px; /* Half the width.. */
}