Different font for list numbers and list contents
css
Solution
HTML
<ol>
<li><p>Hello</p></li>
<li><p>World</p></li>
</ol>
CSS:
ol{
font: italic 1em Georgia, Times, serif;
}
ol p{
font: normal .8em Arial, Helvetica, sans-serif;
}
JSFiddle of the example above
Problem
In CSS, I am trying to style an ordered list so that the contents are one font, but the the numbers are another font. How can I target the list-numbers, which aren't html elements and part of the list-style ? The only thing that I can think of and have tried is making the list an unordered list. Setting the list-style to none and then manually having numbers inside the list that are wrapped in 's where I style them differently. But that seems highly inefficient.