<div class="text">
  Blog link: <a href="http://muki.tw/tech/css-nth-child-notice/" target="_blank">Something you should know about CSS nth-child</a>
</div>

<div id="css-trick">
  <h1>Use CSS nth-child(odd)</h1>
<div class="class-wrap">
  <div class="class">Wordpress<br /><span class="week">(Wednesday)</span></div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">W</div>
    </div>
    <div class="course">install plugin</div>
    <div class="time">19:00 ~ 21:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">W</div>
    </div>
    <div class="course">install theme</div>
    <div class="time">14:00 ~ 18:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">W</div>
    </div>
    <div class="course">post your first atricle</div>
    <div class="time">18:00 ~ 20:00</div>
    <div class="index"></div>
  </div>
</div>

<div class="class-wrap">
  <div class="class">CSS<br /><span class="week">(Saturday)</span></div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">C</div>
    </div>
    <div class="course">Basic knowledge</div>
    <div class="time">19:00 ~ 21:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">C</div>
    </div>
    <div class="course">CSS selectors explain</div>
    <div class="time">15:00 ~ 20:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">C</div>
    </div>
    <div class="course">CSS Hack</div>
    <div class="time">18:00 ~ 22:00</div>
    <div class="index"></div>
  </div>
</div>

<div class="class-wrap">
  <div class="class">HTML<br /><span class="week">(Friday)</span></div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">H</div>
    </div>
    <div class="course">What is HTML</div>
    <div class="time">10:00 ~ 12:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">H</div>
    </div>
    <div class="course">HTML attributes</div>
    <div class="time">13:00 ~ 15:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">H</div>
    </div>
    <div class="course">write first Homepage</div>
    <div class="time">15:30 ~ 17:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">H</div>
    </div>
    <div class="course">Exercise</div>
    <div class="time">18:00 ~ 21:00</div>
    <div class="index"></div>
  </div>
</div>
</div>

<div id="jquery-trick">
  <h1>Use jQuery(:odd)</h1>
<div class="class-wrap">
  <div class="class">Wordpress<br /><span class="week">(Wednesday)</span></div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">W</div>
    </div>
    <div class="course">install plugin</div>
    <div class="time">19:00 ~ 21:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">W</div>
    </div>
    <div class="course">install theme</div>
    <div class="time">14:00 ~ 18:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">W</div>
    </div>
    <div class="course">post your first atricle</div>
    <div class="time">18:00 ~ 20:00</div>
    <div class="index"></div>
  </div>
</div>

<div class="class-wrap">
  <div class="class">CSS<br /><span class="week">(Saturday)</span></div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">C</div>
    </div>
    <div class="course">Basic knowledge</div>
    <div class="time">19:00 ~ 21:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">C</div>
    </div>
    <div class="course">CSS selectors explain</div>
    <div class="time">15:00 ~ 20:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">C</div>
    </div>
    <div class="course">CSS Hack</div>
    <div class="time">18:00 ~ 22:00</div>
    <div class="index"></div>
  </div>
</div>

<div class="class-wrap">
  <div class="class">HTML<br /><span class="week">(Friday)</span></div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">H</div>
    </div>
    <div class="course">What is HTML</div>
    <div class="time">10:00 ~ 12:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">H</div>
    </div>
    <div class="course">HTML attributes</div>
    <div class="time">13:00 ~ 15:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">H</div>
    </div>
    <div class="course">write first Homepage</div>
    <div class="time">15:30 ~ 17:00</div>
    <div class="index"></div>
  </div>
  <div class="content">
    <div class="icon">
      <div class="icon-border">H</div>
    </div>
    <div class="course">Exercise</div>
    <div class="time">18:00 ~ 21:00</div>
    <div class="index"></div>
  </div>
</div>
</div>
@import "compass/css3";

body {
  font-family: arial, sans-serif;
  line-height: 130%;
  font-size: 1em;
}

.text {
  color: #555;
  font-size: .8em;
  a {
    color: #555;
    &:hover {
      color: #CC433E;
    }
  }
}

h1 {
  background: #3A83BF;
  font-size: 1.5em;
  line-height: 1.5em;
  display: inline-block;
  border-radius: 10px;
  padding: 0 10px;
  color: #eee;
  text-shadow: 1px 1px 1px #555;
}

.class-wrap {
  display: table-row;
  .class {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 125px;
    height: 60px;
    color: #555;
    font-weight: bold;
    background: #CC433E;
    color: #ddd;
    border-bottom: 1px solid #fff;
    .week {
      font-size: .8em;
      font-weight: normal;
    }
  }
}

.content {
  display: table;
  width: 100%;
  background: #eaeaea;
  border-bottom: 1px solid #fff;
  height: 60px;
  &:hover {
    cursor: pointer;
    opacity: .8;
  }
  .icon, .course, .time, .index {
    display: table-cell;
    vertical-align: middle;
  }
  .icon {
    width: 50px;
    .icon-border {
      margin: 0 auto;
      border-radius: 15px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #3A83BF;
      font-weight: bold;
      color: #fff;
      font-size: 1.3em;
    }
  }
  .course {
    width: 260px;
    font-size: 1.5em;
    color: #8f8f8f;
  }
  .time {
    font-size: .8em;
    padding-right: 20px;
  }
}

#css-trick {
  float: left;
  .content:nth-child(odd) {
    background: #A69689;
    .course {
      color: #eee
    }
  }
}

#jquery-trick {
  float: left;
  margin-left: 50px;
}

.index {
  font-size: 1.5em;
  opacity: .5;
  color: #fff;
  background: #CC433E;
  text-align: center;
  width: 50px;
}
View Compiled
var contentOdd = $("#jquery-trick .content:odd");
contentOdd.css("background" , "#A69689");
contentOdd.children(".course").css("color","#eee");

$("#css-trick .content").click(function(){
  var index = $(this).index()+1;
  $(this).find(".index").html(index);
});

$("#jquery-trick .content").click(function(){
  var index = $("#jquery-trick .content").index(this);
  $(this).find(".index").html(index);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js