<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);
});
This Pen doesn't use any external CSS resources.