Question

So I am doing a custom ol li list, and i really get confused with shortcuts css wise for ol , ul and li stuff.

If i tell you what I want, and provide some sample code could someone help please.

Ok so I am after a numbered list like so…

<ol>
    <li>Dave Jones<span class="searchTotals">189 searches</span></li>
    <li>Debs<span class="searchTotals">34 searches</span></li>
    <li>Tarbutt<span class="searchTotals">211 searches</span></li>
</ol>

What I want to do is NOT repeat the span class within the li element, so perhaps you could help.

Also I wanted to number style each li.

In so far as put a circle around each number..

Here is some css for the numbers.

background: none repeat scroll 0 0 #ec008c;
border-radius: 1em 1em 1em 1em;
color: #FFFFFF;
display: inline-block;
float: right;
font-family: inherit;
font-size: 10px;
font-weight: bold;
line-height: 1em;
margin-left: 0.5em;
padding: 0.35em 0.5em;
text-align: center;
text-decoration: none;

Here is some css for the SPAN class.

float:right;
color:#3399ff;

Trying to get it to look like this:

Answer 1

if you are looking to float all the text in the div left without using span tags you can use this: (can’t select just part of the text with CSS)

ol li {
   float:left;
   color:#3399ff;
}

If you want to have numbers with circles around them with the li, you’re going to have to use images and use the background:url() property.