Wednesday, January 7, 2015

Add border to odd div's using CSS.

<style type="text/css">

p{
font-family: 'verdana';
font-size: 25px;
}
.wrap {
float: left;
width: 100%;
}
.single_wrap {
float: left;
width: 50%;
padding: 15px 0;
}
.single_div {
float: left;
width: 100%;
}
.single_wrap:nth-child(odd) .single_div {
border-left: 3px solid red;
background: #33b5e5;
}
.single_wrap:nth-child(1) .single_div, .single_wrap:nth-child(2) .single_div {
border-bottom: 5px solid #005555;
}

</style>


<div class="wrap">
<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>

<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>

<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>

<div class="single_wrap">
<div class="single_div">
<p>CSS jQuery</p>
</div>
</div>
</div>


Output :)


No comments:

Post a Comment