Mads Kristensen Mads Kristensen - 3 months ago 24
CSS Question

style different ul tags

I have in my page some ul and li tags there need to be styled different. I am not quite sure if that is what is called to make parent tags?

The picture shows that the circle with numbers from css 1 is repeated over where the css 2 should be used.

How can I do so the circles with numbers 1, 2 etc only are used with the html 1 and css 1?

Timeline

So as my code is now, the

HTML 1

<div class="col-md-10 col-md-offset-1 col-sm-12 text-center feature-title">

<!-- Seminariet bulletpoints -->
<h2>HEADLINEU</h2>
<div>
<ul style="text-align:left">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 2</li>
</ul>
</div>
</div>


HTML 2

<div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
<h2>PROGRAM FOR DAGEN</h2>
<ul class="cbp_tmtimeline">
<li>
<time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span> <span>18:30</span></time>
<div class="cbp_tmicon cbp_tmicon-phone"></div>
<div class="cbp_tmlabel">
<h2>Ricebean black-eyed pea</h2>
<p>Winter purslane...</p>
</div>
</li>
</ul>
</div>


CSS 1

ul {
counter-reset: section;
list-style: none;
position:relative;

padding:0;

display:inline-block;
}
li {
margin: 0 0 10px 0;
line-height: 40px;



}
li:before {
content: counter(section);
counter-increment: section;
display: inline-block;
width: 40px;
height: 40px;
margin: 0 20px 0 0;
border: 1px solid #ccc;
border-radius: 100%;
text-align: center;


}


CSS 2

.cbp_tmtimeline > li {
position: relative;
}

/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
display: block;
width: 25%;
padding-right: 100px;
position: absolute;
}

.cbp_tmtimeline > li .cbp_tmtime span {
display: block;
text-align: right;
}

.cbp_tmtimeline > li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}

Answer

Make it specific to a class

.feature-title li:before {
 ...
}