<div class="wfm">
<ul>
<li>
<div>
R: 9
</div>
<ul>
<li>
<div class="left">
L: 3
</div>
<ul>
<li>
<div class="left">
L: 2
</div>
<ul>
<li>
<div class="left">
L: 1
</div>
<ul>
<li>
<div class="left">
L: 0
</div>
</li>
<li>
<div class="right">
R: 3
</div>
</li>
</ul>
</li>
<li>
<div class="right">
R: 4
</div>
</li>
</ul>
</li>
<li>
<div class="right">
R: null
</div>
</li>
</ul>
</li>
<li>
<div class="right">
R: 9
</div>
<ul>
<li>
<div class="left">
L: 7
</div>
<ul>
<li>
<div class="left">
L: 5
</div>
<ul>
<li>
<div class="left">
L: 3
</div>
</li>
<li>
<div class="right">
R: 6
</div>
</li>
</ul>
</li>
<li>
<div class="right">
R: 10
</div>
</li>
</ul>
</li>
<li>
<div class="right">
R: null
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<style>
.wfm ul {
list-style: none; /* Remove HTML bullets */
padding: 0;
margin: 0;
}
.wfm li {
padding-left: 16px;
}
.left {
color: blue;
}
.right {
color: red;
}
.left:before {
content: "---->"; /* Insert content that looks like bullets */
padding-right: 8px;
color: blue;
}
.right:before {
content: "---->"; /* Insert content that looks like bullets */
padding-right: 8px;
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript">
//$(document).ready(function(){
// $(".left").css("color", "blue");
// $(".right").css("color", "red");
//});
</script>
